lodash#slice JavaScript Examples

stackLowUseAndUnpublishedApi = (
  publishedApis,
  enrollmentByTargetApi,
  maxApiToDisplay = 13
) => {
  const publishedEnrollmentByTargetApi = enrollmentByTargetApi.filter(
    ({ name }) => publishedApis.includes(name)
  );

  const filteredEnrollmentByTargetApi = slice(
    publishedEnrollmentByTargetApi,
    0,
    maxApiToDisplay
  );

  let otherCount = enrollmentByTargetApi
    .filter(({ name }) => !publishedApis.includes(name))
    .reduce((accumulator, { count }) => accumulator + count, 0);

  otherCount = slice(publishedEnrollmentByTargetApi, maxApiToDisplay).reduce(
    (accumulator, { count }) => accumulator + count,
    otherCount
  );

  if (otherCount > 0) {
    filteredEnrollmentByTargetApi.push({ name: 'others', count: otherCount });
  }

  return filteredEnrollmentByTargetApi;
}

dataProviderParametersToContactInfo = (parameters) =>
  chain(parameters)
    .map(({ label, ...rest }) =>
      label.endsWith(' (Bac à sable)')
        ? { label: label.replace(' (Bac à sable)', ''), ...rest }
        : { label, ...rest }
    )
    .reject(({ email }) => !email)
    .reject(({ label }) => label.endsWith(' (Production)'))
    .reject(({ label }) => label.endsWith(' (FC)'))
    .groupBy(({ email }) => email)
    .mapValues((params) => {
      let labels = params.map(({ label }) => label);
      if (labels.length > 4) {
        labels = labels.slice(0, 4);
        labels.push('etc.');
      }

      return labels.join(', ');
    })
    .toPairs()
    .map(([email, label]) => ({ email, label }))
    .value()

renderPanes() {
    const { children = [], fields, context } = this.props;
    const tabPanes = map(fields, field => {
      const { props: { tplFrom = -1, tplTo = -1, ...tabPaneProps } = {} } = field;
      const tabPane = map(slice(children, tplFrom, tplTo), tpl => {
        const DynamicComponent = get('DynamicComponent');
        return <DynamicComponent context={context} template={tpl} onRef={this.onRef(tpl)} />;
      });
      return (
        <Tabs.TabPane {...tabPaneProps} key={field.fieldName} tab={field.fieldLabel}>
          {tabPane}
        </Tabs.TabPane>
      );
    });
    return tabPanes;
  }

/**
   * 新增行
   */
  handleAppendRow() {
    const { colCount, rowIndex, pComponent } = this.props;
    const newRow = [];
    for (let index = 0; index < colCount; index += 1) {
      newRow.push(cloneDeep(emptyField));
    }
    const sliceIndex = rowIndex + 1;
    pComponent.fields = concat(
      [],
      slice(pComponent.fields, 0, sliceIndex),
      [newRow],
      slice(pComponent.fields, sliceIndex)
    );
    this.handleRefresh();
  }

/**
   * todo 要将 site 字段放到 removeSiteFields 中
   * 删除行 实际方法
   */
  handleRemoveRow() {
    const { rowIndex, pComponent } = this.props;
    pComponent.fields = concat(
      [],
      slice(pComponent.fields, 0, rowIndex),
      slice(pComponent.fields, rowIndex + 1)
    );
    // // todo 租户级代码
    // const removeFields = pComponent.fields[rowIndex];
    // for (let index = 0; index < removeFields.length; index += 1) {
    //   const removeField = removeFields[index];
    //   if (removeField.siteFlag === 1) {
    //     removeField.visiableFlag = 0;
    //     pComponent.removeSiteFields.push(removeField);
    //   }
    // }
    this.handleCleanWillRemovePositionY();
    this.handleRefresh();
  }

/**
   * 合并右侧空
   */
  handleMergeRight() {
    const { rowIndex, colIndex, pComponent } = this.props;
    const { fields = [] } = pComponent;
    const currentRow = fields[rowIndex];
    if (!(currentRow[colIndex + 1] && currentRow[colIndex + 1].componentType === emptyFieldType)) {
      notification.warning({
        message: intl
          .get('hpfm.codeRule.model.codeRule.canCombineRightFiled')
          .d('只能合并右侧空字段'),
      });
      return;
    }
    const currentField = currentRow[colIndex];

    // 重写 field 的 colspan
    if (currentField.colspan && isNumber(currentField.colspan)) {
      currentField.colspan += 1;
    } else {
      currentField.colspan = 2;
    }
    // 去除多余的 emptyField
    pComponent.fields[rowIndex] = concat(
      [],
      slice(currentRow, 0, colIndex + 1),
      slice(currentRow, colIndex + 2)
    );
    this.handleRefresh();
  }

/**
   * 取消合并
   */
  handleCancelMergeRight() {
    const { component, pComponent, rowIndex, colIndex } = this.props;
    if (!(component.colspan && isNumber(component.colspan))) {
      notification.warning({
        message: intl.get('hpfm.codeRule.model.codeRule.canQCFiled').d('只能拆分合并后的字段'),
      });
    }

    if (component.colspan > 2) {
      component.colspan -= 1;
    } else {
      delete component.colspan;
    }
    // 加上 空字段
    const currentRow = pComponent.fields[rowIndex];
    const sliceIndex = colIndex + 1;
    pComponent.fields[rowIndex] = concat(
      [],
      slice(currentRow, 0, sliceIndex),
      [cloneDeep(emptyField)],
      slice(currentRow, sliceIndex)
    );
    this.handleRefresh();
  }

/**
   * todo 要将 site 字段放到 removeSiteFields 中
   * @param {object} component
   * @param {object} field
   * @param {object} fieldOptions
   */
  handleRemoveField(component, field, fieldOptions) {
    // 保证数据一定正确
    // TODO 跨行的处理
    if (field.colspan && isNumber(field.colspan)) {
      const fillFields = [];
      for (let index = 0; index < field.colspan; index += 1) {
        fillFields.push(cloneDeep(emptyField));
      }
      // eslint-disable-next-line
      component.fields[fieldOptions.rowIndex] = concat(
        [],
        slice(component.fields[fieldOptions.rowIndex], 0, fieldOptions.colIndex),
        fillFields,
        slice(component.fields[fieldOptions.rowIndex], fieldOptions.colIndex + 1)
      );
    } else {
      // eslint-disable-next-line
      component.fields[fieldOptions.rowIndex][fieldOptions.colIndex] = cloneDeep(emptyField);
    }
    // // todo 租户级代码
    // if(field.siteFlag === 1) {
    //   // 平台级 需要放在 removeSiteFields 中
    //   // eslint-disable-next-line no-param-reassign
    //   field.visiableFlag = 0;
    //   component.removeSiteFields.push(field);
    // }
    this.handleRefresh();
  }

handleRemoveField(component, field, fieldOptions) {
    const { onUpdateComponent, onActiveComponent } = this.props;
    // 保证数据一定正确

    // eslint-disable-next-line no-param-reassign
    component.fields = concat(
      [],
      slice(component.fields, 0, fieldOptions.index),
      slice(component.fields, fieldOptions.index + 1)
    );

    // TODO 更新 PageDesigner 中的数据
    if (isFunction(onUpdateComponent)) {
      onUpdateComponent(component);
    }
    if (isFunction(onActiveComponent)) {
      onActiveComponent(component);
    }
  }

/**
 * 从服务器中拿到的 templateType 为 Tabs 的tpl 转化成设计器的 格式转化
 * @param {object} template - 服务器中 存储的 tpl
 * @param {object} options
 * @param {boolean} options.noCloneDeep - 不需要将 template 复制一份(即不改变原数据)
 * @returns {object} 设计器需要的 tpl
 */
function dynamicTabsDirtyExtra(template, options) {
  const noCloneDeep = options && options.noCloneDeep;
  const newTemplate = noCloneDeep ? template : cloneDeep(template);
  const { fields = [], children = [] } = newTemplate;
  forEach(fields, field => {
    const extraField = dynamicTabs.dirtyExtraFields[field.componentType] || noop;
    extraField(newTemplate, field);
    const tabsTemplates = slice(children, field.tplFrom, field.tplTo);
    // eslint-disable-next-line no-param-reassign
    field.children = convertExtraTemplates(tabsTemplates);
    return field;
  });
  delete newTemplate.children;
  return newTemplate;
}

/**
   * 新增字段
   * @param {Object} component - drop component
   * @param {Object} field - new add field
   * @param {Object} swapField - drop empty field
   */
  @Bind()
  handleAddField(component, field, swapField) {
    const newField = convertInitExtraField(component, field);
    if (isArray(component.fields)) {
      let insertIndex = component.fields.length;
      if (swapField) {
        forEach(component.fields, (cField, index) => {
          insertIndex = index;
          if (cField === swapField) {
            return false;
          }
        });
      }
      // eslint-disable-next-line
      component.fields = concat(
        [],
        slice(component.fields, 0, insertIndex),
        [newField],
        slice(component.fields, insertIndex)
      );
    } else {
      // eslint-disable-next-line no-param-reassign
      component.fields = [newField];
    }
    this.setState({
      activeComponentCode: component.templateType,
      currentEditComponent: component,
      currentEditField: newField,
      propKey: uuid(),
    });
  }

limitRight = (array, limit) => slice(
  array, Math.max(array.length - limit, 0), array.length,
)

/**
 * 从pathname中获取 tabKey
 * @param {!String} pathname - 切换的pathname
 */
function getTabKey(pathname) {
  return slice(split(pathname, '/'), 1);
}

/**
   * 新增列
   */
  handleAppendCol() {
    const { pComponent, rowIndex, colIndex } = this.props;
    // 先找到当前字段的位置所占位置的最后
    const currentRow = pComponent.fields[rowIndex];
    let positionX = 0;
    for (let index = 0; index <= colIndex; index += 1) {
      const f = currentRow[index];
      if (f.colspan && isNumber(f.colspan)) {
        positionX += f.colspan;
      } else {
        positionX += 1;
      }
    }
    // 得到当前字段的位置
    forEach(pComponent.fields, (fArr, rIndex) => {
      let endPositionX = 0;
      forEach(fArr, (f, cIndex) => {
        const isColspan = f.colspan && isNumber(f.colspan);
        if (isColspan) {
          endPositionX += f.colspan;
        } else {
          endPositionX += 1;
        }
        if (endPositionX > positionX) {
          // 改变 colspan
          // eslint-disable-next-line
          f.colspan += 1;
          return false;
        } else if (endPositionX === positionX) {
          // 增加新的 emptyField
          const sliceIndex = cIndex + 1;
          pComponent.fields[rIndex] = concat(
            [],
            slice(fArr, 0, sliceIndex),
            [cloneDeep(emptyField)],
            slice(fArr, sliceIndex)
          );
          return false;
        }
      });
    });
    this.handleRefresh();
  }

/**
   * todo 要将 site 字段放到 removeSiteFields 中
   * 删除列 实际方法
   */
  handleRemoveCol() {
    const { pComponent, rowIndex, colIndex } = this.props;
    // 找到要删除的位置
    const currentRow = pComponent.fields[rowIndex];
    let positionX = 0;
    for (let index = 0; index <= colIndex; index += 1) {
      const f = currentRow[index];
      if (f.colspan && isNumber(f.colspan)) {
        positionX += f.colspan;
      } else {
        positionX += 1;
      }
    }
    forEach(pComponent.fields, (fArr, rIndex) => {
      let endPositionX = 0;
      forEach(fArr, (f, cIndex) => {
        const isColspan = f.colspan && isNumber(f.colspan);
        if (isColspan) {
          endPositionX += f.colspan;
        } else {
          endPositionX += 1;
        }
        if (endPositionX >= positionX && isColspan) {
          // colspan -1
          if (f.colspan === 2) {
            // eslint-disable-next-line
            delete f.colspan;
          } else {
            // eslint-disable-next-line
            f.colspan -= 1;
          }
          return false;
        } else if (endPositionX === positionX) {
          // const removeField = fArr[cIndex];
          // // todo 租户级的代码
          // if (removeField.siteFlag === 1) {
          //   removeField.visiableFlag = 0;
          //   pComponent.removeSiteFields.push(removeField);
          // }
          pComponent.fields[rIndex] = concat([], slice(fArr, 0, cIndex), slice(fArr, cIndex + 1));
          return false;
        }
      });
    });
    this.handleCleanWillRemovePositionX();
    this.handleRefresh();
  }

export default function VirtualTable(props) {
  const tableRef = useRef();
  const {
    columns,
    expandedRowKeys = [],
    onExpandChange = (e) => e,
    rowKey = 'id',
    data,
    isTree,
    height,
    minHeight = 100,
    childrenColumnName = 'children',
    rowSelection = {},
    shouldUpdateScroll = true,
    rowHeight = 36,
    autoInitHeight,
    parentClassName,
    isIndeterminate = false,
  } = props;
  const [trueDataSource, setTrueDataSource] = useState(data);
  const [expandKeys, setExpandKeys] = useState(expandedRowKeys);
  const [selectKeys, setSelectKeys] = useState(rowSelection.selectedRowKeys);
  const [selectRows, setSelectRows] = useState(rowSelection.selectedRowKeys);
  const [selectAllKeys, setSelectAllKeys] = useState([]);
  const [height2, setHeight] = useState(height);
  const [pathMap, setPathMap] = useState({});

  const mergedColumns = columns.map((column, index) => {
    if (index === 0 && isTree) {
      const tempColumn = cloneDeep(column);
      const tempRender = column.render;
      if (column.render) {
        tempColumn.render = (columnData) => {
          const { rowData: record, rowIndex } = columnData;
          return (
            <span
              style={{
                paddingLeft: record[childrenColumnName]
                  ? (record.INDENT_INDEX || 0) * 12 + 8
                  : (record.INDENT_INDEX || 0) * 12 + 34,
              }}
            >
              {/* eslint-disable-next-line no-nested-ternary */}
              {record[childrenColumnName] ? (
                expandKeys.includes(record[rowKey]) ? (
                  <Icon
                    type="indeterminate_check_box-o"
                    className={styles['expand-icon']}
                    onClick={() => {
                      handleExpand(false, record, rowIndex);
                    }}
                  />
                ) : (
                  <Icon
                    className={styles['expand-icon']}
                    type="add_box-o"
                    onClick={() => {
                      handleExpand(true, record, rowIndex);
                    }}
                  />
                )
              ) : null}
              <span />
              {tempRender(columnData)}
            </span>
          );
        };
      } else {
        tempColumn.render = ({ rowData: record, dataIndex, rowIndex }) => {
          const val = record[dataIndex];
          return (
            <span
              style={{
                paddingLeft: record[childrenColumnName]
                  ? (record.INDENT_INDEX || 0) * 12 + 8
                  : (record.INDENT_INDEX || 0) * 12 + 34,
              }}
            >
              {/* eslint-disable-next-line no-nested-ternary */}
              {record[childrenColumnName] ? (
                expandKeys.includes(record[rowKey]) ? (
                  <Icon
                    className={styles['expand-icon']}
                    type="indeterminate_check_box-o"
                    onClick={() => {
                      handleExpand(false, record, rowIndex);
                    }}
                  />
                ) : (
                  <Icon
                    className={styles['expand-icon']}
                    type="add_box-o"
                    onClick={() => {
                      handleExpand(true, record, rowIndex);
                    }}
                  />
                )
              ) : null}
              <span />
              {val}
            </span>
          );
        };
      }
      return tempColumn;
    }
    return column;
  });

  useEffect(() => {
    if (autoInitHeight) {
      // eslint-disable-next-line
      const childrenRefWrapperDom = ReactDOM.findDOMNode(tableRef.current);
      const childrenRefDom = childrenRefWrapperDom;
      const { top: offsetTop } = childrenRefDom.getBoundingClientRect();
      if (parentClassName) {
        const parentRefDom = document.querySelector(`.${parentClassName}`);
        const { top } = parentRefDom.getBoundingClientRect();
        setHeight(
          minHeight > parentRefDom.offsetHeight - (offsetTop - top) - 10
            ? minHeight
            : parentRefDom.offsetHeight - (offsetTop - top) - 10
        );
      } else {
        setHeight(
          minHeight > window.innerHeight - offsetTop - 30
            ? minHeight
            : window.innerHeight - offsetTop - 30
        );
      }
    }
  }, []);

  useEffect(() => {
    if (isUndefined(expandedRowKeys) && !isTree) {
      setTrueDataSource(data);
    } else {
      const { rowKeys } = flatTree(data, [], expandedRowKeys);
      setTrueDataSource(rowKeys);
    }
    if (!isUndefined(rowSelection.selectedRowKeys)) {
      const { rowKeys } = selectAllTree(data, []);
      setSelectAllKeys(rowKeys);
    }
    if (tableRef.current && shouldUpdateScroll) {
      tableRef.current.scrollTop(0);
    }
  }, [data]);

  useEffect(() => {
    setExpandKeys(expandedRowKeys);
    if (Math.abs(expandedRowKeys.length - expandKeys.length) > 1 && tableRef.current) {
      tableRef.current.scrollTop(0);
    }
  }, [expandedRowKeys]);

  useEffect(() => {
    const { rowKeys } = flatTree(data, [], expandedRowKeys);
    if (
      tableRef.current &&
      -tableRef.current.minScrollY - (trueDataSource.length - rowKeys.length) * rowHeight <
        -tableRef.current.scrollY - height
    ) {
      tableRef.current.scrollTop(0);
    }
    setTrueDataSource(rowKeys);
  }, [expandKeys]);

  useEffect(() => {
    setSelectKeys(rowSelection.selectedRowKeys);
  }, [rowSelection.selectedRowKeys]);

  useEffect(() => {
    const { pathMap2, rowKeys } = selectTree(data, [], selectKeys);
    if (isIndeterminate) {
      setPathMap(pathMap2);
    }
    setSelectRows(rowKeys);
  }, [selectKeys]);

  const SelectColumn = !isEmpty(rowSelection) && {
    title: (
      <Checkbox
        checked={selectAllKeys.length !== 0 && selectKeys.length === selectAllKeys.length}
        onChange={(e) => {
          if (e.target.checked) {
            rowSelection.onChange(
              selectAllKeys.map((item) => item[rowKey]),
              selectAllKeys
            );
          } else {
            rowSelection.onChange([], []);
          }
        }}
        indeterminate={!isEmpty(selectKeys) && selectKeys.length !== selectAllKeys.length}
      />
    ),
    dataIndex: '',
    width: 60,
    align: 'center',
    render: ({ rowData: record }) => {
      const val = record[rowKey];
      return (
        <Checkbox
          checked={selectKeys.includes(val)}
          indeterminate={
            isIndeterminate &&
            selectKeys.includes(val) &&
            !(pathMap[val] || []).every((item) => selectKeys.includes(item))
          }
          onChange={(e) => {
            if (e.target.checked) {
              rowSelection.onChange([...selectKeys, val], [...selectRows, record]);
              rowSelection.onSelect(record, e.target.checked, [...selectRows, record], e);
            } else {
              rowSelection.onChange(
                selectKeys.filter((item) => item !== val),
                selectRows.filter((item) => item[rowKey] !== val)
              );
              rowSelection.onSelect(
                record,
                e.target.checked,
                selectRows.filter((item) => item[rowKey] !== val),
                e
              );
            }
          }}
        />
      );
    },
  };

  const handleExpand = (flag, record, rowIndex) => {
    onExpandChange(flag, record);
    if (isUndefined(expandedRowKeys) && record[childrenColumnName]) {
      if (flag) {
        setExpandKeys(Array.from(new Set(expandKeys.concat(record[rowKey]))));
        setTrueDataSource(
          slice(trueDataSource, 0, rowIndex + 1)
            .concat(
              record[childrenColumnName].map((item) => {
                return { ...item, INDENT_INDEX: (record.INDENT_INDEX || 0) + 1 };
              })
            )
            .concat(slice(trueDataSource, rowIndex + 1, trueDataSource.length))
        );
      } else {
        const { rowKeys, i } = literateTree([record], [], expandKeys);
        let length = 0;
        i.forEach((v) => {
          length += v;
        });
        setExpandKeys(
          Array.from(
            new Set(
              remove(expandKeys, (item) => {
                return !rowKeys.includes(item);
              })
            )
          )
        );
        setTrueDataSource(
          slice(trueDataSource, 0, rowIndex + 1).concat(
            slice(trueDataSource, rowIndex + 1 + length, trueDataSource.length)
          )
        );
      }
    }
  };

  const literateTree = (collections = [], rowKeys = [], expandArr = [], i = []) => {
    const arr = rowKeys;
    const j = i;
    const renderTree = collections.map((item) => {
      const temp = item;
      if (temp[childrenColumnName] && expandArr.includes(temp[rowKey])) {
        arr.push(temp[rowKey]);
        j.push(temp[childrenColumnName].length);
        temp[childrenColumnName] = [
          ...literateTree(temp[childrenColumnName] || [], arr, expandArr, j).renderTree,
        ];
      }
      return temp;
    });
    return {
      renderTree,
      rowKeys,
      expandArr,
      i,
    };
  };

  const flatTree = (collections = [], rowKeys = [], expandArr = [], INDENT_INDEX = -1) => {
    const arr = rowKeys;
    const renderTree = collections.map((item) => {
      const temp = item;
      arr.push({ ...temp, INDENT_INDEX: (INDENT_INDEX || 0) + 1 });
      if (temp[childrenColumnName] && expandArr.includes(temp[rowKey])) {
        temp[childrenColumnName] = [
          ...flatTree(temp[childrenColumnName] || [], arr, expandArr, (INDENT_INDEX || 0) + 1)
            .renderTree,
        ];
      }
      return temp;
    });
    return {
      renderTree,
      rowKeys,
      expandArr,
      INDENT_INDEX,
    };
  };

  const selectTree = (collections = [], rowKeys = [], selectArr = [], levelPath = {}) => {
    const arr = rowKeys;
    const pathMap2 = levelPath;
    const renderTree = collections.map((item) => {
      const temp = item;
      pathMap2[temp[rowKey]] = [
        temp[rowKey],
        ...(temp[childrenColumnName] || []).map((res) => res[rowKey]),
      ];
      if (selectArr.includes(temp[rowKey])) {
        arr.push(temp);
      }
      if (temp[childrenColumnName]) {
        temp[childrenColumnName] = [
          ...selectTree(temp[childrenColumnName] || [], arr, selectArr, pathMap2).renderTree,
        ];
      }
      return temp;
    });
    return {
      renderTree,
      rowKeys,
      selectArr,
      pathMap2,
    };
  };

  const selectAllTree = (collections = [], rowKeys = []) => {
    const arr = rowKeys;
    const renderTree = collections.map((item) => {
      const temp = item;
      arr.push(temp);
      if (temp[childrenColumnName]) {
        temp[childrenColumnName] = [
          ...selectAllTree(temp[childrenColumnName] || [], arr).renderTree,
        ];
      }
      return temp;
    });
    return {
      renderTree,
      rowKeys,
    };
  };

  return (
    <PerformanceTable
      className="virtual-table"
      {...props}
      ref={tableRef}
      isTree={false}
      virtualized
      data={trueDataSource}
      columns={isEmpty(rowSelection) ? mergedColumns : [SelectColumn, ...mergedColumns]}
      pagination={false}
      shouldUpdateScroll={false}
      height={height2}
    />
  );
}