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

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

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

{
	"react statefull component": {
		"prefix": "react-native-statefull",
		"body": [
			"import React from 'react';",
			"import {View, StyleSheet} from 'react-native';",
			"",
			"type Props = {",
			"",
			"};",