Michael Dougall itsdouges

🏒 🇦🇺 ⚛️ 🎮 • @trytriplex • dad x2

itsdouges / hoc-wrapping-component-with-default-props.tsx

Last active January 27, 2020 19:49

Passing default props info through a HOC using TypeScript 3.1.x

	import * as React from 'react';

	type Omit<T, K extends keyof any> = T extends any ? Pick<T, Exclude<keyof T, K>> : never;
	type ExtractProps<TComponentOrTProps> = TComponentOrTProps extends React.ComponentType<
	infer P
	>
	? P
	: never;

	interface InjectedProps {

itsdouges / async-component.js

Created September 19, 2018 07:42

Create an async component that returns props.children during loading

	import React from 'react';

	// async-component.js
	export default ({ resolve }) => class AsyncComponent extends React.Component {
	state = { Component: undefined };

	componentDidMount() {
	resolve().then(Component => {
	this.setState({ Component });
	});

itsdouges / RefCollector.tsx

Created April 16, 2018 13:10

Collects a descendants refs up the tree and calls back with it.

	import * as React from 'react';

	type SupplyRef = (ref: HTMLElement \| null) => void;
	type GetRef = SupplyRef;
	type ChildrenGetRef = (getRef: SupplyRef) => React.ReactNode;

	interface Props {
	children: ChildrenGetRef \| React.ReactNode;
	getRef?: GetRef;
	}

itsdouges / tz-parse.js

Created January 30, 2018 12:39

Parse and serialize moment timezones correctly

	import moment from 'moment-timezone';

	// Override moments default behaviour so we can save timezone data.
	moment.fn.toJSON = function() {
	const timeZoneId = this.tz();
	return timeZoneId ? `${this.format()}\|${timeZoneId}` : this.format();
	};

	const dateRegex = /^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2}):(\d{2}(?:\.{0,1}\d))(?:Z\|(\+\|-)([\d\|:]))?(\|.*)?$/;

itsdouges / ng-armory.js

Last active October 14, 2017 22:50

	import {AfterViewInit, Component, ElementRef, Inject, Input, OnChanges, OnDestroy, OnInit, SimpleChanges} from '@angular/core';
	import {ArmoryStore} from './store';
	import {Provider} from 'react-redux';
	import * as React from 'react';
	import {ReactElement} from 'react';
	import * as ReactDOM from 'react-dom';

	@Component({
	selector: 'tome-armory-component',
	template: ' '

itsdouges / angular-with-react.js

Last active October 11, 2017 22:53

Potentially how to use gw2a react components with Angular

	// store.js

	import { combineReducers, applyMiddleware, createStore } from 'redux';
	import thunk from 'redux-thunk';
	import { reducers, Tooltip } from 'armory-component-ui';

	const store = createStore(
	// Create the root reducer.
	combineReducers(reducers),

itsdouges / qs.js

Created September 4, 2017 05:59

Very naive query string implementation

	// @flow

	export default function getParameterByName (
	name: string,
	url: string = window.location.href
	): string {
	const normalisedName = name.replace(/[[\]]/g, '\\$&');

	const regex = new RegExp(`[?&]${normalisedName}(=([^&#]*)\|&\|#\|$)`);
	const results = regex.exec(url);

itsdouges / addEvent.js

Created September 4, 2017 05:58

Wrapper around addEventListener/removeEventListener

	export function addEvent (event: string, cb: Function) {
	window.addEventListener(event, cb, false);
	return () => window.removeEventListener(event, cb, false);
	}

itsdouges / iframe.js

Created September 4, 2017 05:53

Creates an iframe and appends it to the container element

	export function iframe (container: HTMLElement, body: string) {
	const iframeElement = document.createElement('iframe');
	container.appendChild(iframeElement);
	iframeElement.contentWindow.document.open();
	iframeElement.contentWindow.document.write(`<html><head><style>html,body { margin: 0; padding: 0; overflow: hidden; }</style></head><body>${body}</body></html>`);
	iframeElement.contentWindow.document.close();
	}

itsdouges / prefixStyles.js

Created September 4, 2017 05:52

Prefixes inline styles with vendor browser prefixes

	// @flow

	import upperFirst from 'lodash/upperFirst';

	const vendors = ['Webkit', 'Moz', 'ms', 'O'];

	// eslint-disable-next-line import/prefer-default-export
	export function prefix (key: string, value: string): { [key: string]: string } {
	const obj = {
	[key]: value,