rxjs#take TypeScript Examples

private setCharacter(character: GridCharacter): void {
    this.character = character;
    this.noPathFoundRetryable.reset();
    this.pathBlockedRetryable.reset();
    this.pathBlockedWaitElapsed = 0;
    this.calcShortestPath();
    this.character
      .autoMovementSet()
      .pipe(
        take(1),
        filter((movement) => movement !== this)
      )
      .subscribe(() => {
        this.stop(MoveToResult.MOVEMENT_TERMINATED);
      });
  }

ngAfterContentInit() {
    if (this._lazyContentTpl) {
      // Render the content as soon as the accordion becomes open.
      this.opened
        .pipe(
          startWith(null as void),
          filter(() => !!this.expanded),
          take(1),
        )
        .subscribe(() => {
          this.lazyContentTpl = this._lazyContentTpl;
        });
    }
  }

private pushValue(value: string) {
    if (!this.allowEmpty && !value) {
      this.removeInputControlError();
      return;
    }
    if (!this.allowRepeat && this.model.includes(value)) {
      return;
    }
    this.inputControl.setValue(this.inputRef.nativeElement.value);
    // inputControl 自身的状态为同步计算
    this.syncControlStatus();
    if (this.inputControl.valid) {
      this.emitValue(this.model.concat(value));
    } else if (this.inputControl.pending) {
      // PENDING 后只会变为 VALID 或 INVALID 的决议状态
      this.inputControl.statusChanges.pipe(take(1)).subscribe(_ => {
        this.syncControlStatus();
        if (this.inputControl.valid) {
          this.emitValue(this.model.concat(value));
        }
      });
    }
  }

ngAfterViewInit(): void {
    this.lazyServiceService.adHost = this.adHost;
    this.zone.runOutsideAngular(() => {
      fromEvent(window, 'scroll', <AddEventListenerOptions>passiveEventListenerOptions).pipe(
        debounceTime(50),
        filter(() => {
          return window.scrollY >= 200;
        }),
        take(1),
        takeUntil(this.destroyService$)
      ).subscribe(() => {
        this.lazyServiceService.create().then(()=>{
          this.cdr.detectChanges();
        })
      })
    })
  }

onClick() {
    if (this.disabled) {
      return;
    }
    this.autocomplete.directive$$.pipe(take(1)).subscribe(directive => {
      directive.onSuggestionClick(this.value);
    });
  }

num$ = interval(1000).pipe(take(100));

PublishDialog: FC<{ hide?: () => void }> = ({ hide }) => {
  const { draft } = useDraft();
  const { notify, dismissNotification } = useNotifications();
  const [message, setMessage] = useState('');
  const [loading, setLoading] = useState(false);

  const onPublish = () => {
    const notifyId = uniqueId('export-notify');
    const loading = (message: string) =>
      notify({
        status: 'loading',
        message,
        dismissAfter: 0,
        dismissible: false,
        id: notifyId,
      });
    const branchName = Math.random().toString(16).slice(2);
    const user = user$.getValue()!.user!;
    const octokit = octokit$.getValue()!;
    setLoading(true);

    of(draft!)
      .pipe(
        switchMap((draft) => {
          if (!(draft.id && draft.name && draft.version)) {
            return throwError(() => new Error('请填写完整 ID，名称，版本号'));
          }
          loading('编译中');
          return from(
            excuteCompile({
              meta: {
                id: draft.id,
                name: draft.name,
                version: draft.version!,
                source: draft.source!,
                defaultConfig: draft.defaultConfig,
              },
            }),
          ).pipe(
            catchError(() =>
              throwError(() => new Error('编译错误，请打开控制台查看详情')),
            ),
            switchMap(() => {
              loading('获取仓库信息');
              return from(
                octokit.repos.get({
                  owner: user.login!,
                  repo: packageJson.metaRepository.repo,
                }),
              ).pipe(
                catchError((error) => {
                  if (error.status === 404) {
                    loading('Fork 仓库');
                    return from(
                      octokit.repos.createFork({
                        owner: packageJson.metaRepository.owner,
                        repo: packageJson.metaRepository.repo,
                      }),
                    ).pipe(
                      concatMap(() => {
                        loading('查询 Fork 结果');
                        return timer(5000, 10000).pipe(
                          switchMap(() =>
                            from(
                              octokit.repos.get({
                                owner: user.login!,
                                repo: packageJson.metaRepository.repo,
                              }),
                            ).pipe(catchError(() => EMPTY)),
                          ),
                          take(1),
                        );
                      }),
                    );
                  }
                  return throwError(() => new Error('查询仓库信息失败'));
                }),
              );
            }),
            switchMap(({ data: repo }) => {
              loading('创建分支');
              return from(
                octokit.git.createRef({
                  owner: repo.owner.login,
                  repo: repo.name,
                  ref: `refs/heads/${branchName}`,
                  sha: packageJson.metaRepository.base,
                }),
              );
            }),
            switchMap(() => {
              loading('同步主分支');
              return from(
                octokit.repos.mergeUpstream({
                  owner: user.login!,
                  repo: packageJson.metaRepository.repo,
                  branch: branchName,
                }),
              );
            }),
            switchMap(() => {
              loading('获取文件信息');
              return from(
                octokit.repos.getContent({
                  owner: user.login,
                  repo: packageJson.metaRepository.repo,
                  path: `meta/${draft.id}.json`,
                  ref: branchName,
                }),
              ).pipe(
                map(({ data }) =>
                  Array.isArray(data) ? data[0].sha : data.sha,
                ),
                catchError((err) =>
                  err?.status === 404 ? of(undefined) : throwError(() => err),
                ),
              );
            }),
            switchMap((sha) => {
              const prepareDraft = omit(cloneDeep(draft), 'id');
              prepareDraft.detail = DOMPurify.sanitize(
                prepareDraft.detail || '',
              );
              return from(
                octokit.repos.createOrUpdateFileContents({
                  owner: user.login,
                  repo: packageJson.metaRepository.repo,
                  path: `meta/${draft.id}.json`,
                  message,
                  content: Base64.encode(JSON.stringify(prepareDraft)),
                  sha,
                  branch: branchName,
                }),
              );
            }),
            switchMap(() =>
              from(
                octokit.pulls.create({
                  owner: packageJson.metaRepository.owner,
                  repo: packageJson.metaRepository.repo,
                  title: `[${draft.name}] ${draft.synopsis}`,
                  head: `${user.login}:${branchName}`,
                  base: 'master',
                  maintainer_can_modify: true,
                }),
              ),
            ),
          );
        }),
        finalize(() => {
          dismissNotification(notifyId);
          setLoading(false);
          hide?.();
        }),
        catchError((err) => {
          notify({
            status: 'error',
            message: err?.message || err?.toString(),
            dismissible: true,
            dismissAfter: 3000,
          });
          return EMPTY;
        }),
      )
      .subscribe(() => {
        notify({
          status: 'success',
          message: '提交成功，请返回查看、预览',
        });
      });
  };

  return (
    <>
      <TextField
        description="将会在切换版本时展示"
        value={message}
        onChange={(_, text) => setMessage(text || '')}
        disabled={loading}
      />
      <DialogFooter>
        <PrimaryButton
          className="ml-auto"
          onClick={onPublish}
          disabled={loading || !message.length}
        >
          发布
        </PrimaryButton>
      </DialogFooter>
    </>
  );
}