lodash#each TypeScript Examples

copyConfig = (
  pageConfig: PageConfigType,
  selectedKey: string,
  newKey: number,
) => {
  const vDom = pageConfig[selectedKey];
  const childNodes = vDom.childNodes;
  if (!childNodes) {
    pageConfig[newKey] = vDom;
  } else {
    const newVDom = { ...vDom };
    pageConfig[newKey] = newVDom;
    if (Array.isArray(childNodes)) {
      newVDom.childNodes = copyChildNodes(pageConfig, childNodes);
    } else {
      const newChildNodes: PropsNodeType = {};
      each(childNodes, (nodes, propName) => {
        newChildNodes[propName] = copyChildNodes(pageConfig, nodes!);
      });
      newVDom.childNodes = newChildNodes;
    }
  }
}

findChildren = (_ispanId: any, children: any, spans: any) => {
    const tree: any[] = [];
    this.findChildren.bind(this);
    each(spans, (i) => {
      if (includes(children, i.spanId)) {
        tree.push(i.spanId);
        if (i.children) {
          tree.push(this.findChildren(i.spanId, i.children, spans));
        }
      }
    });
    return tree;
  };

export function getChildrenFields(pageConfig:PageConfigType,childNodes:ChildNodesType){
  const resultFields=[];
  const getFields=(childNodes:string[])=>{
    each(childNodes,nodeKey=>{
      const {loop}=pageConfig[nodeKey];
      if(typeof loop==='string'){
        resultFields.push(...getStateFields({loop}));
      }
    });
  };
  if(childNodes){
    if(Array.isArray(childNodes)){
      getFields(childNodes);
    }else {
      each(childNodes,nodeKeys=>{
        getFields(nodeKeys);
      });
    }
  }

  return resultFields;
}

export function getStateFields(data: any, fieldsRet?: string[]) {
  const ret = fieldsRet || [];
  if (Array.isArray(data)) {
    return data.map((item) => getStateFields(item));
  } else if (!data) {
    return ret;
  }
  each(data, (value, key) => {
    if (value === '$$' || value === '&') {
      ret.push(ALL_PROPS);
    } else if (key !== '$' && key.includes('$')) {
      //todo 字符串方法体
      resolveFieldFromExpression(value, ret);
    } else if (
      typeof value === 'string' &&
      /(\\)?\$(?:([a-z0-9_\.]+|&|\$)|{([^}{]+?)})/gi.test(value)
    ) {
      value.replace(
        /(\\)?\$(?:([a-z0-9_\.]+|&|\$)|{([^}{]+?)})/gi,
        (_, escape) => {
          !escape && resolveVariableAndFilterField(_, ret);
          return '';
        },
      );
    } else if (isPlainObject(value)) {
      getStateFields(value, ret);
    }
  });

  return [...new Set(ret.filter((field) => field !== 'funParams'))];
}

getPropParentNodes = (
  childNodes: ChildNodesType,
  parentNodes: PropParentNodes,
  index = 0,
) => {
  const iframe = getIframe();
  if (Array.isArray(childNodes)) {
    for (const childKey of childNodes) {
      const node = getSelectedNode(`${childKey}-${index}`, iframe);
      if (node) {
        const parentNode = node.parentElement;
        parentNodes[defaultPropName] = parentNode;
        break;
      }
    }
  } else {
    each(childNodes, (nodes, propName) => {
      if (!parentNodes[propName]) {
        for (const key of nodes) {
          const node = getSelectedNode(`${key}-${index}`, iframe);
          if (node) {
            const parentNode = node.parentElement;
            parentNodes[propName] = parentNode;
            break;
          }
        }
      }
    });
  }

  return parentNodes;
}

export function getChildNodesRects(
  nodeRectsMapRef: any,
  childNodes: ChildNodesType,
  propParentNodes: PropParentNodes,
  isRest?: boolean,
) {
  if (!childNodes) return;
  const nodeRectsMap = nodeRectsMapRef.current;
  function keys2Rects(nodeKeys, propName) {
    const parentNodes = propParentNodes[propName];
    if (!parentNodes) return;
    const childNodes = parentNodes.children;
    each(nodeKeys, (key, index) => {
      const childNode=childNodes[index];
      if (!childNode||EXCLUDE_POSITION.includes(css(childNode).position)) return;
      if (!nodeRectsMap[key]) {
        nodeRectsMap[key] = getNodeRealRect(
          childNode
        );
      } else if (isRest) {
        nodeRectsMap[key] = getNodeRealRect(
          childNode
        );
      }
    });
  }
  if (Array.isArray(childNodes)) {
    keys2Rects(childNodes, defaultPropName);
  } else {
    each(childNodes, (nodes, propName) => {
      keys2Rects(nodes, propName);
    });
  }

  nodeRectsMapRef.current = nodeRectsMap as NodeRectsMapType;
}

export function generateRequiredProps(componentName: string) {
  const { propsConfig } = getComponentConfig(componentName);
  const requiredProps: any = {};
  each(propsConfig, (config, propName) => {
    const { isRequired, defaultValue } = config;
    if (isRequired) requiredProps[propName] = defaultValue;
  });

  return requiredProps;
}

function handleRequiredChildNodes(componentName: string) {
  const { isRequired, nodePropsConfig, childNodesRule } = getComponentConfig(
    componentName,
  );
  const nodeProps: any = {};
  if (isRequired) {
    nodeProps.children = renderRequiredChildNodes(childNodesRule);
  } else if (nodePropsConfig) {
    each(nodePropsConfig, (propConfig, key) => {
      const { isRequired, childNodesRule } = propConfig;
      if (isRequired) {
        nodeProps[key] = renderRequiredChildNodes(childNodesRule);
      }
    });
  }
  return nodeProps;
}

setPageState = (newState: T, isReplace?: boolean,executeKey?:string) => {
    if (isReplace) {
      this.state = newState;
    } else {
      this.state = { ...this.state, ...newState };
    }
    each(this.listeners, (listener) => listener());

    if(executeKey&&this.listenerMap[executeKey]){
      this.listenerMap[executeKey]();
    }
  };

generateNewKey = (
  vDOMCollection: PageConfigType,
  rootKey: number,
) => {
  const keyMap: { [key: string]: string } = {};
  const newVDOMCollection: PageConfigType = {};
  let newKey = rootKey;
  each(vDOMCollection, (vDom, key) => {
    ++newKey;
    if (key === ROOT) {
      newKey = rootKey;
    }
    keyMap[key] = `${newKey}`;
    newVDOMCollection[newKey] = vDom;
  });

  each(newVDOMCollection, (vDom) => {
    const childNodes = vDom.childNodes;
    if (!childNodes) return;
    if (Array.isArray(childNodes)) {
      vDom.childNodes = childNodes.map((key) => keyMap[key]);
    } else {
      const newChildNodes: PropsNodeType = {};
      each(childNodes, (nodes, propName) => {
        newChildNodes[propName] = nodes!.map((key) => keyMap[key]);
      });
      vDom.childNodes = newChildNodes;
    }
  });

  return newVDOMCollection;
}

export function createTemplateConfigs(
  templateConfigs: PageConfigType,
  pageConfig: PageConfigType,
  childNodes: ChildNodesType,
) {
  if (Array.isArray(childNodes)) {
    for (const key of childNodes) {
      templateConfigs[key] = pageConfig[key];

      const { childNodes } = templateConfigs[key];
      if (childNodes)
        createTemplateConfigs(templateConfigs, pageConfig, childNodes);
    }
  } else {
    each(childNodes, (childKeys) => {
      if (!isEmpty(childKeys))
        createTemplateConfigs(templateConfigs, pageConfig, childKeys);
    });
  }
}

export function deleteChildNodes(
  pageConfig: PageConfigType,
  childNodes: ChildNodesType,
  propName?: string,
) {
  if (Array.isArray(childNodes)) {
    deleteArrChild(pageConfig, childNodes);
  } else {
    each(childNodes, (propChildNodes, key) => {
      if (propName) {
        if (key === propName) {
          deleteArrChild(pageConfig, propChildNodes!);
        }
      } else {
        deleteArrChild(pageConfig, propChildNodes!);
      }
    });
  }
}

/**
 * 撤销
 * @param state
 * @returns {(*&void&{undo: *, redo: *})|(*&T&{undo: *, redo: *})}
 */
export function undo(state: StateType) {
  const { undo, redo } = state;
  if (undo.length == 0) return state;
  const nextState = undo.pop();
  const prevState: any = {};
  each(nextState, (_, key) => (prevState[key] = get(state, key)));
  redo.push(prevState);
  return {
    ...state,
    ...nextState,
    undo,
    redo,
  };
}

/**
   * 排序优先级：
   * 1、sortParams里的条件优先级高于原始数据
   * 2、sortParams多个item：按照顺序优先级，排在后面的优先级高
   * 3、item中多个条件：sortByField > sortFunc > sortBy > sortMethod
   */
  handleDimensionValuesSort = () => {
    each(this.sortParams, (item) => {
      const { sortFieldId, sortByMeasure } = item;
      // 万物排序的前提
      if (!sortFieldId) return;
      const originValues = [...(this.sortedDimensionValues[sortFieldId] || [])];
      const result = handleSortAction({
        dataSet: this,
        sortParam: item,
        originValues,
        isSortByMeasure: !isEmpty(sortByMeasure),
      });
      this.sortedDimensionValues[sortFieldId] = result;
    });
  };

handleDimensionValueFilter = () => {
    each(this.filterParams, ({ filterKey, filteredValues, customFilter }) => {
      const defaultFilterFunc = (row: DataType) =>
        row[filterKey] && !includes(filteredValues, row[filterKey]);
      this.displayData = [
        ...this.getStartRows(),
        ...filter(this.getMovableRows(), (row) => {
          if (customFilter) {
            return customFilter(row) && defaultFilterFunc(row);
          }
          return defaultFilterFunc(row);
        }),
        ...this.getEndRows(),
      ];
    });
  };

realCellRender = (scrollX: number, scrollY: number) => {
    const indexes = this.calculateXYIndexes(scrollX, scrollY);
    DebuggerUtil.getInstance().logger(
      'renderIndex:',
      this.preCellIndexes,
      indexes,
    );
    const { add, remove } = diffPanelIndexes(this.preCellIndexes, indexes);

    DebuggerUtil.getInstance().debugCallback(DEBUG_VIEW_RENDER, () => {
      // add new cell in panelCell
      each(add, ([i, j]) => {
        const viewMeta = this.layoutResult.getCellMeta(j, i);
        if (viewMeta) {
          const cell = this.cfg.dataCell(viewMeta);
          // mark cell for removing
          cell.set('name', `${i}-${j}`);
          this.addCell(cell);
        }
      });
      const allCells = getAllChildCells(
        this.panelGroup.getChildren() as IElement[],
        DataCell,
      );
      // remove cell from panelCell
      each(remove, ([i, j]) => {
        const findOne = find(
          allCells,
          (cell) => cell.get('name') === `${i}-${j}`,
        );
        findOne?.remove(true);
      });
      updateMergedCells(this.spreadsheet);
      DebuggerUtil.getInstance().logger(
        `Render Cell Panel: ${allCells?.length}, Add: ${add?.length}, Remove: ${remove?.length}`,
      );
    });
    this.preCellIndexes = indexes;
  };

protected layout() {
    const { data, spreadsheet } = this.headerConfig;
    const { colCell } = spreadsheet.options;

    each(data, (node: Node) => {
      const item = node;

      if (this.isColCellInRect(item)) {
        const cell =
          colCell?.(item, spreadsheet, this.headerConfig) ||
          this.getCellInstance(item, spreadsheet, this.headerConfig);

        item.belongsCell = cell;

        const group = this.getCellGroup(item);
        group.add(cell);
      }
    });
  }

protected layout() {
    const {
      data,
      spreadsheet,
      width,
      viewportHeight,
      seriesNumberWidth,
      scrollY,
      scrollX,
    } = this.headerConfig;

    const rowCell = spreadsheet?.facet?.cfg?.rowCell;
    // row'cell only show when visible
    const rowCellInRect = (item: Node): boolean => {
      return (
        viewportHeight + scrollY > item.y && // bottom
        scrollY < item.y + item.height && // top
        width - seriesNumberWidth + scrollX > item.x && // left
        scrollX - seriesNumberWidth < item.x + item.width
      ); // right
    };
    each(data, (item: Node) => {
      if (rowCellInRect(item) && item.height !== 0) {
        let cell: S2CellType;
        // 首先由外部控制UI展示
        if (rowCell) {
          cell = rowCell(item, spreadsheet, this.headerConfig);
        }
        // 如果外部没处理，就用默认的
        if (isEmpty(cell)) {
          if (spreadsheet.isPivotMode()) {
            cell = new RowCell(item, spreadsheet, this.headerConfig);
          }
        }
        item.belongsCell = cell;
        this.add(cell);
      }
    });
  }

public layout() {
    const { data, scrollY, viewportHeight, spreadsheet } = this.headerConfig;
    if (spreadsheet.isPivotMode) {
      //  添加矩形背景
      this.addBackGround();
    }

    const borderGroup = this.addGroup();
    each(data, (item: any) => {
      const { y, height: cellHeight, isLeaf } = item;
      const isHeaderCellInViewport = this.isHeaderCellInViewport(
        y,
        cellHeight,
        scrollY,
        viewportHeight,
      );
      if (isHeaderCellInViewport) {
        // 按需渲染：视窗内的才渲染
        const group = this.addGroup();

        // 添加文本
        this.addText(group, item);

        this.add(group);

        // 添加边框
        if (!isLeaf) {
          this.addBorder(borderGroup, item);
        }
      }
    });
  }

public clearAllEvents() {
    each(this.canvasEventHandlers, ({ type, handler }) => {
      this.canvasContainer?.off(type, handler);
    });
    each(this.s2EventHandlers, ({ type, handler }) => {
      this.spreadsheet.off(type, handler);
    });
    each(this.domEventListeners, (listener) => {
      listener.target.removeEventListener(
        listener.type,
        listener.handler,
        listener.options,
      );
    });
    this.canvasEventHandlers = [];
    this.s2EventHandlers = [];
    this.domEventListeners = [];
  }

private bindLaterEvent = () => {
    const canvas = this.get('canvas');
    const containerDOM: EventTarget = document.body;

    let events: EventListenerReturn[] = [];
    if (this.isMobile) {
      events = [
        this.addEventListener(containerDOM, 'touchmove', this.onMouseMove),
        this.addEventListener(containerDOM, 'touchend', this.onMouseUp),
        this.addEventListener(containerDOM, 'touchcancel', this.onMouseUp),
      ];
      this.addEvent(canvas, 'touchend', this.onMouseUp);
      this.addEvent(canvas, 'touchcancel', this.onMouseUp);
    } else {
      events = [
        this.addEventListener(containerDOM, 'mousemove', this.onMouseMove),
        this.addEventListener(containerDOM, 'mouseup', this.onMouseUp),
        // 为了保证划出 canvas containerDom 时还没触发 mouseup
        this.addEventListener(containerDOM, 'mouseleave', this.onMouseUp),
      ];
      this.addEvent(canvas, 'mouseup', this.onMouseUp);
    }

    this.clearEvents = () => {
      events.forEach((e) => {
        e?.remove();
      });
      each(this.eventHandlers, (eh) => {
        eh.target?.off(eh.type, eh.handler);
      });
      this.eventHandlers.length = 0;
    };
  };

/**
 * 重做
 * @param state
 * @returns {(*&void&{undo: *, redo: *})|(*&T&{undo: *, redo: *})}
 */
export function redo(state: StateType) {
  const { undo, redo } = state;
  if (redo.length == 0) return state;
  const nextState = redo.pop();
  const prevState: any = {};
  each(nextState, (_, key) => (prevState[key] = get(state, key)));
  undo.push(prevState);
  return {
    ...state,
    ...nextState,
    undo,
    redo,
  };
}

layoutHierarchy = (
  facetCfg: SpreadSheetFacetCfg,
  parentNode: Node,
  currentNode: Node,
  hierarchy: Hierarchy,
): boolean => {
  let expandCurrentNode = true;
  const addNode = (node: Node, insetIndex = -1, hierarchyIndex = -1) => {
    if (insetIndex === -1) {
      // add in parent
      parentNode.children.push(node);
      hierarchy.pushNode(node);
    } else {
      parentNode.children.splice(insetIndex, 0, node);
      hierarchy.pushNode(node, hierarchyIndex);
    }
  };
  if (facetCfg.layoutHierarchy) {
    const facetLayoutHierarchy = facetCfg.layoutHierarchy(
      facetCfg.spreadsheet,
      currentNode,
    );
    if (facetLayoutHierarchy) {
      const deleteNode = !isBoolean(facetLayoutHierarchy?.delete)
        ? false
        : facetLayoutHierarchy?.delete;
      expandCurrentNode = !deleteNode;
      const { push: pushNodes, unshift: unshiftNodes } = facetLayoutHierarchy;
      let currentIndex = parentNode.children.length;
      let hierarchyIndex = hierarchy.getNodes().length;
      if (!isEmpty(unshiftNodes)) {
        each(unshiftNodes, (v) => {
          addNode(v);
        });
        currentIndex = parentNode.children.length;
        hierarchyIndex = hierarchy.getNodes().length;
      }
      if (!isEmpty(pushNodes)) {
        each(pushNodes, (v) => {
          addNode(v);
        });
      }
      if (!deleteNode) {
        addNode(currentNode, currentIndex, hierarchyIndex);
      }
    } else {
      addNode(currentNode);
    }
  } else {
    addNode(currentNode);
  }
  return expandCurrentNode;
}

export function handleChildNodes(
  specialProps: SelectedInfoBaseType,
  pageConfig: PageConfigType,
  allState: any,
  children?: ChildNodesType,
) {
  const nodeProps: any = {};
  const { key: parentKey } = specialProps;
  const { componentName } = pageConfig[parentKey];
  if (isEmpty(children)) {
    return handleRequiredChildNodes(componentName);
  }
  const { nodePropsConfig, isOnlyNode } = getComponentConfig(componentName);

  if (!nodePropsConfig) {
    nodeProps.children = renderNodes(
      children as string[],
      specialProps,
      pageConfig,
      allState,
      undefined,
      isOnlyNode,
    );
  } else {
    each(children, (nodes: string[], propName: string) => {
      const { isOnlyNode, isRequired, childNodesRule } = nodePropsConfig![
        propName
      ];
      if (isEmpty(nodes)) {
        return (
          isRequired &&
          (nodeProps[propName] = renderRequiredChildNodes(childNodesRule))
        );
      }

      if (propName.includes('#')) {
        const realPropName = propName.substring(1);
        // eslint-disable-next-line react/display-name
        nodeProps[realPropName] = (...funParams) => {
          return (
            <FunParamContextProvider value={funParams}>
              {renderNodes(
                nodes,
                specialProps,
                pageConfig,
                allState,
                propName,
                isOnlyNode,
              )}
            </FunParamContextProvider>
          );
        };
      } else {
        nodeProps[propName] = renderNodes(
          nodes,
          specialProps,
          pageConfig,
          allState,
          propName,
          isOnlyNode,
        );
      }
    });
  }

  return nodeProps;
}

export function setPosition(nodes: any[], isModal?: boolean) {
  if (isModal) {
    each(nodes, (node) => (node.style.position = 'fixed'));
  } else {
    each(nodes, (node) => (node.style.position = 'absolute'));
  }
}

// 根据当前state来更新cell的样式
  public updateByState(stateName: InteractionStateName, cell: S2CellType) {
    this.spreadsheet.interaction.setInteractedCells(cell);
    const stateStyles = get(
      this.theme,
      `${this.cellType}.cell.interactionState.${stateName}`,
    );

    const { x, y, height, width } = this.getCellArea();

    each(stateStyles, (style, styleKey) => {
      const targetShapeNames = keys(
        pickBy(SHAPE_ATTRS_MAP, (attrs) => includes(attrs, styleKey)),
      );
      targetShapeNames.forEach((shapeName: StateShapeLayer) => {
        const isStateShape = this.stateShapes.has(shapeName);
        const shape = isStateShape
          ? this.stateShapes.get(shapeName)
          : this[shapeName];

        // stateShape 默认 visible 为 false
        if (isStateShape && !shape.get('visible')) {
          shape.set('visible', true);
        }

        // 根据borderWidth更新borderShape大小 https://github.com/antvis/S2/pull/705
        if (
          shapeName === 'interactiveBorderShape' &&
          styleKey === 'borderWidth'
        ) {
          if (isNumber(style)) {
            const marginStyle = {
              x: x + style / 2,
              y: y + style / 2,
              width: width - style - 1,
              height: height - style - 1,
            };
            each(marginStyle, (currentStyle, currentStyleKey) => {
              updateShapeAttr(shape, currentStyleKey, currentStyle);
            });
          }
        }
        updateShapeAttr(shape, SHAPE_STYLE_MAP[styleKey], style);
      });
    });
  }

export function getSelector(selector: STATE_PROPS[]) {
  const states = getPageState();
  const resultState = {};
  each(selector, (stateName) => (resultState[stateName] = states[stateName]));
  return resultState;
}

function getFilterCategory(
  prevComponentsCategory: CategoryType,
  value?: string,
  rule?: string[],
) {
  const filterOpenKeys: string[] = [];
  const filterCategory: CategoryType = {};
  value = isEmpty(value) ? undefined : value;

  if (value && rule) {
    rule = rule.filter((name) => name.includes(value!));
  } else if (!value && !rule) {
    return { filterCategory: prevComponentsCategory, filterOpenKeys };
  }
  each(prevComponentsCategory, (infos, category) => {
    const { components } = infos || { components: null };
    if (components) {
      each(components, (componentInfo, componentName) => {
        if (
          (!rule && componentName.includes(value!)) ||
          (rule && rule.includes(componentName))
        ) {
          !filterOpenKeys.includes(category) && filterOpenKeys.push(category);
          update(
            filterCategory,
            `${category}.components`,
            (componentInfos = {}) => {
              componentInfos[componentName] = componentInfo;
              return componentInfos;
            },
          );
        }
      });
    } else if (
      (!rule && category.includes(value!)) ||
      (rule && rule.includes(category))
    ) {
      filterOpenKeys.push(category);
      filterCategory[category] = infos;
    }
  });
  return { filterOpenKeys, filterCategory };
}

//  sortFunc > sortBy > sortFieldId
  handleDimensionValuesSort = () => {
    each(this.sortParams, (item) => {
      const { sortFieldId, sortBy, sortFunc, sortMethod, query } = item;
      // 排序的前提
      if (!sortFieldId) return;

      let data = this.getMovableRows();

      const restData = [];
      if (query) {
        const scopedData = [];
        data.forEach((record) => {
          const keys = Object.keys(query);
          let inScope = true;
          for (let index = 0; index < keys.length; index++) {
            const k = keys[index];
            if (record[k] !== query[k]) {
              inScope = false;
              restData.push(record);
              break;
            }
          }

          if (inScope) {
            scopedData.push(record);
          }
        });
        data = scopedData;
      }

      let sortedData = data;

      if (sortFunc) {
        sortedData = sortFunc({
          ...item,
          data,
        }) as DataType[];
      } else if (sortBy && !isFunction(sortBy)) {
        const reversedSortBy = [...sortBy].reverse();
        sortedData = data.sort((a, b) => {
          const idxA = reversedSortBy.indexOf(a[sortFieldId]);
          const idxB = reversedSortBy.indexOf(b[sortFieldId]);

          return idxB - idxA;
        });
      } else if (isAscSort(sortMethod) || isDescSort(sortMethod)) {
        const func = isFunction(sortBy) ? sortBy : null;
        sortedData = orderBy(
          data,
          [func || sortFieldId],
          [sortMethod.toLocaleLowerCase() as boolean | 'asc' | 'desc'],
        );
      }

      if (restData.length) {
        sortedData = [...sortedData, ...restData];
      }

      // For frozen options
      this.displayData = [
        ...this.getStartRows(),
        ...sortedData,
        ...this.getEndRows(),
      ];
    });
  };