Skip to content

Instantly share code, notes, and snippets.

😀
RxJS!

Dimitry DimitryDushkin

😀
RxJS!
Block or report user

Report or block DimitryDushkin

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
View gist:9020b6f5639fbbd46bc0746c5bfc2586

Create patch file

git diff > patch.diff

Apply path file

patch -p1 < patch.diff

@DimitryDushkin
DimitryDushkin / tsconfig.json
Created Jul 27, 2019
Example tsconfig for RN application
View tsconfig.json
{
"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. */
View use-draggable-example.5.tsx
function DraggableComponent() {
const draggableDivRef = useRef<HTMLDivElement>();
const drag$ = useDraggable(draggableDivRef);
useLayoutEffect(() => {
if (!drag$.current) {
return () => {};
}
const dragSubscription = drag$.current.subscribe(e => {
View use-draggable-example.4.ts
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$);
View use-draggable-example.3.ts
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", () => {
View use-draggable-example.2.ts
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
}))
);
View use-draggable-example.1.ts
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
DimitryDushkin / use-draggable-example.ts
Created Jun 5, 2019
useDraggable for React based on RxJS
View use-draggable-example.ts
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
DimitryDushkin / animated-fade.tsx
Last active Apr 12, 2019
React Native animated fade-in and fade-out
View animated-fade.tsx
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
DimitryDushkin / babel.config.js
Last active Mar 21, 2019
RxJS + babel 7 to reduce bundle size
View babel.config.js
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",
You can’t perform that action at this time.