lodash-es#map TypeScript Examples

/**
   * 使用新的数据重新设置整个画布的元素
   * 注意：将会清除画布上所有已有的节点和边
   * @param { object } graphData 图数据
   */
  graphDataToModel(graphData: GraphConfigData) {
    this.nodes = map(graphData.nodes, node => {
      const Model = this.getModel(node.type);
      if (!Model) {
        throw new Error(`找不到${node.type}对应的节点。`);
      }
      const { x: nodeX, y: nodeY } = node;
      // 根据 grid 修正节点的 x, y
      if (nodeX && nodeY) {
        node.x = snapToGrid(nodeX, this.gridSize);
        node.y = snapToGrid(nodeY, this.gridSize);
        if (typeof node.text === 'object') {
          node.text.x -= getGridOffset(nodeX, this.gridSize);
          node.text.y -= getGridOffset(nodeY, this.gridSize);
        }
      }
      return new Model(node, this);
    });
    this.edges = map(graphData.edges, edge => {
      const Model = this.getModel(edge.type);
      if (!Model) {
        throw new Error(`找不到${edge.type}对应的边。`);
      }
      return new Model(edge, this);
    });
  }

getAnchors() {
    const { model, graphModel } = this.props;
    const {
      isSelected, isHitable, isDragging,
    } = model;
    const { isHovered } = this.state;
    if (isHitable && (isSelected || isHovered) && !isDragging) {
      const edgeStyle = model.getAnchorLineStyle();
      return map(model.anchors,
        (anchor, index) => {
          const style = model.getAnchorStyle(anchor);
          return (
            <Anchor
              anchorData={anchor}
              node={this}
              style={style}
              edgeStyle={edgeStyle}
              anchorIndex={index}
              nodeModel={model}
              graphModel={graphModel}
              setHoverOFF={this.setHoverOFF}
            />
          );
        });
    }
    return [];
  }

SelectApplicationView = () => {
  const { applicationsById, selectedApplicationId } = useAppState()
  const { selectApplication, editApplication, editDeployment } = useActions()
  const sortedApplications = orderBy(applicationsById, (x) =>
    x.name.toLowerCase()
  )
  return size(sortedApplications) ? (
    <Box display="flex" alignItems="center" style={{ gap: '1rem' }}>
      <FormControl variant="outlined" style={{ flex: 1 }}>
        <InputLabel id="application-select-label">Application</InputLabel>
        <Select
          labelId="application-select-label"
          label="Application"
          onChange={(event) => {
            selectApplication(event.target.value as string)
          }}
          value={selectedApplicationId}>
          {map(sortedApplications, (app) => (
            <MenuItem value={app.id} key={app.id}>
              {app.name}
            </MenuItem>
          ))}
        </Select>
      </FormControl>
      <Button color="secondary" variant="contained" onClick={editApplication}>
        Edit App
      </Button>
      <Button color="secondary" variant="contained" onClick={editDeployment}>
        Edit Deploy
      </Button>
    </Box>
  ) : null
}

ApplicationConfigCodec = t.intersection([
  t.strict({
    id: t.string,
    name: t.string,
    releaseFilter: t.string,
    repo: RepoCodec,
    deploySettings: DeploySettingsCodec,
  }),
  t.exact(
    new t.InterfaceType<HasEnvironmentSettings, HasEnvironmentSettings>(
      'HasEnvironmentSettings',
      (x: any): x is HasEnvironmentSettings => 'environmentSettingsByName' in x,
      (input: any, context) => {
        if (input.environmentSettingsByName)
          return EnvironmentSettingsByNameCodec.validate(input, context)
        if (input.environmentSettingsById) {
          return t.success({
            environmentSettingsByName: keyBy(
              map(
                input.environmentSettingsById,
                (settings): EnvironmentSettings => ({
                  name: settings.name,
                  workflowInputValue: settings.workflowInputValue,
                })
              ),
              (x) => x.name
            ),
          })
        }
        return t.failure(input, context)
      },
      t.identity,
      {
        environmentSettingsByName: {},
      }
    )
  ),
])

describe('flatMap()', () => {
  it('can handle large arrays', () => {
    expect(() => {
      flatMap(times(1000000, identity), () => [1]);
    }).not.toThrowError();
  });

  //
  // stolen from https://github.com/lodash/lodash
  //

  const array = [1, 2, 3, 4];

  function duplicate(n: number): number[] {
    return [n, n];
  }

  it('should map values in `array` to a new flattened array', () => {
    expect(flatMap(array, duplicate)).toEqual(flatten(map(array, duplicate)));
  });

  it('should accept a falsey `collection`', () => {
    expect(flatMap(null, identity)).toEqual([]);
    expect(flatMap(undefined, identity)).toEqual([]);
  });

  it('should work with objects with non-number length properties', () => {
    expect(flatMap({ length: [1, 2] }, (a) => a)).toEqual([1, 2]);
  });
});

render() {
    const {
      graphModel, tool, options, dnd, snaplineModel,
    } = this.props;
    const style: ContainerStyle = {};
    // 如果初始化的时候，不传宽高，则默认为父容器宽高。
    if (options.width) {
      style.width = `${graphModel.width}px`;
    }
    if (options.height) {
      style.height = `${graphModel.height}px`;
    }
    const { fakerNode, editConfigModel } = graphModel;
    const { adjustEdge } = editConfigModel;

    return (
      <div
        className="lf-graph"
        style={style}
      >
        <CanvasOverlay
          graphModel={graphModel}
          dnd={dnd}
        >
          <g className="lf-base">
            {
              map(graphModel.sortElements, (nodeModel) => (
                this.getComponent(nodeModel, graphModel)
              ))
            }
          </g>
          {
            fakerNode ? this.getComponent(fakerNode, graphModel) : ''
          }
        </CanvasOverlay>
        <ModificationOverlay graphModel={graphModel}>
          <OutlineOverlay graphModel={graphModel} />
          {adjustEdge ? <BezierAdjustOverlay graphModel={graphModel} /> : ''}
          {!options.isSilentMode && options.snapline !== false ? <SnaplineOverlay snaplineModel={snaplineModel} /> : ''}
        </ModificationOverlay>
        <ToolOverlay graphModel={graphModel} tool={tool} />
        {options.background && <BackgroundOverlay background={options.background} />}
        {options.grid && <Grid {...options.grid} graphModel={graphModel} />}
      </div>
    );
  }