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

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

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

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

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

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

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 isLegacyBuild = typeof process.env.BUNDLE_FOR_IOS === 'undefined';
const iosVersion = process.env.BUNDLE_FOR_IOS || 12;
const modernBuild = {
  presets: [
    [
      '@babel/preset-env',
      {
        targets: `iOS >= ${iosVersion}`,
      },
    ],

DimitryDushkin

export default class SomeSingleton {
    private static privateShared: Api;

    public static get shared(): Api {
        if (!SomeSingleton.privateShared) {
            SomeSingleton.privateShared = new SomeSingleton();
        }

        return SomeSingleton.privateShared;
    }

DimitryDushkin

// babel.config.js
module.exports = {
  "presets": [
    "module:metro-react-native-babel-preset",
  ],
  "plugins": [
    ["module-resolver", {
      "root": ["./src"],
      "extensions": [".js", ".ts", ".tsx", ".ios.js", ".android.js"]
    }],