DimitryDushkin

export const SINGLE_TASK_BLOCKED = Symbol('task blocked');
export type SingleTaskBlocked = typeof SINGLE_TASK_BLOCKED;
export const singleTaskQueue = <TReturn, TArgs extends Array<any>>(func: (...args: TArgs) => Promise<TReturn>) => {
    let isWorking = false;

    return async (...args: TArgs): Promise<TReturn | SingleTaskBlocked> => {
        if (isWorking) {
            return SINGLE_TASK_BLOCKED;
        }

DimitryDushkin

const rxjs = {
    Observable: "internal/Observable",
    ConnectableObservable: "internal/observable/ConnectableObservable",
    GroupedObservable: "internal/operators/groupBy",
    observable: "internal/symbol/observable",
    Subject: "internal/Subject",
    BehaviorSubject: "internal/BehaviorSubject",
    ReplaySubject: "internal/ReplaySubject",
    AsyncSubject: "internal/AsyncSubject",
    asapScheduler: "internal/scheduler/asap",

DimitryDushkin

import React from 'react';
import {StyleProp, ViewStyle} from 'react-native';
import * as Animatable from 'react-native-animatable';

type Props = {
    isVisible: boolean,
    children: React.ReactNode,
    style?: StyleProp<ViewStyle>,
};

DimitryDushkin

import React, { useRef, useLayoutEffect } from "react";
import { fromEvent, Observable } from "rxjs";
import { takeUntil, mergeMap, map } from "rxjs/operators";
import ReactDOM from "react-dom";

import "./styles.css";

function App() {
  return (
    <div className="App">

DimitryDushkin

export type DragEvent = { x: number; y: number };
export function createDragObservable<T extends PointerEvent>(
  up$: Observable<T>,
  down$: Observable<T>,
  move$: Observable<T>
): Observable<DragEvent> {
  let startPosition: DragEvent;
  return down$.pipe(
    mergeMap(e => {
      startPosition = startPosition || { x: e.pageX, y: e.pageY };

DimitryDushkin

return down$.pipe(
    mergeMap(e => {
      startPosition = startPosition || { x: e.pageX, y: e.pageY };
      return move$.pipe(
        takeUntil(up$),
        map(e => ({
          x: e.pageX - startPosition.x,
          y: e.pageY - startPosition.y
        }))
      );

DimitryDushkin

import { marbles } from "rxjs-marbles/jest";
import { createDragObservable } from "./use-draggable";

const data = {
  d: new PointerEvent('mousedown'),
  m: new PointerEvent('mousedown'),
  u: new PointerEvent('mousedown'),
}

describe("useDraggable", () => {

DimitryDushkin

export function useDraggable(draggableRef: React.RefObject<HTMLElement>) {
  const drag$ = useRef<Observable<DragEvent>>();
  useLayoutEffect(() => {
    if (!draggableRef.current) {
      return () => {};
    }
    const down$ = fromEvent<PointerEvent>(draggableRef.current, "pointerdown");
    const move$ = fromEvent<PointerEvent>(document, "pointermove");
    const up$ = fromEvent<PointerEvent>(document, "pointerup");
    drag$.current = createDragObservable(up$, down$, move$);

DimitryDushkin

function DraggableComponent() {
  const draggableDivRef = useRef<HTMLDivElement>();
  const drag$ = useDraggable(draggableDivRef);

  useEffect(() => {
    if (!drag$.current) {
      return () => {};
    }

    const dragSubscription = drag$.current.subscribe(e => {

DimitryDushkin

{
    "compileOnSave": true,
    "compilerOptions": {
        "skipLibCheck": true,
        /* Basic Options */
        "target": "es2018" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */,
        "module": "es2015" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */,
        "lib": ["es2018", "dom"] /* Specify library files to be included in the compilation. */,
        // "allowJs": true,                       /* Allow javascript files to be compiled. */
        // "checkJs": true,                       /* Report errors in .js files. */