Skip to content

Instantly share code, notes, and snippets.

View dantman's full-sized avatar

Daniel Friesen dantman

View GitHub Profile
@dantman
dantman / .babelrc
Last active October 22, 2022 14:13
babel-jest Babel 7 node_modules import issue
{
"presets": [
[
"@babel/preset-env",
{
"modules": "commonjs"
}
]
]
}
@dantman
dantman / example.js
Created April 16, 2018 19:51
Function decorator
@memoize
export default function myExpensiveFunction(data) {
// do something expensive
return result;
}
@dantman
dantman / AnchorRef.js
Created April 7, 2018 22:07
A very simple AnchorRef component that uses a render-prop to provide a local ref (for popover anchors, etc...)
import {PureComponent} from 'react';
export default class AnchorRef extends PureComponent {
state = {
ref: undefined,
};
_setRef = ref => {
this.setState({ref});
};
@dantman
dantman / fragment-component-to-jsx-fragment.js
Created April 4, 2018 04:09
jscodeshift codemod to change <React.Fragment> and <Fragment> to <>
module.exports = function (file, api, options) {
const j = api.jscodeshift; // alias the jscodeshift API
const root = j(file.source); // parse JS code into an AST
let mutation = false;
const isJSXIdentifier = (node, name) => j.JSXIdentifier.check(node) && node.name === name;
// Remove the opening and closing element names if they are Fragment or React.Fragment
const update = node => {
@dantman
dantman / index.html
Created April 1, 2018 13:53
material-ui/src/List/ListItem.js styles annotated with React Native relevance
<span class=""><span class="pl-k" style="box-sizing:border-box;color:#d73a49;" >export</span> <span class="pl-k" style="box-sizing:border-box;color:#d73a49;" >const</span> <span class="pl-c1" style="box-sizing:border-box;color:#005cc5;" >styles</span> <span class="pl-k" style="box-sizing:border-box;color:#d73a49;" >=</span> <span class="pl-smi" style="box-sizing:border-box;color:#24292e;" >theme</span> <span class="pl-k" style="box-sizing:border-box;color:#d73a49;" >=&gt;</span> ({</span><br>
<span class="">&nbsp; root<span class="pl-k" style="box-sizing:border-box;color:#d73a49;" >:</span> {</span><br>
<span class="yes" style="background-color:#81A594;" >&nbsp; &nbsp; display<span class="pl-k" style="box-sizing:border-box;color:#d73a49;" >:</span> <span class="pl-s" style="box-sizing:border-box;color:#032f62;" ><span class="pl-pds" style="box-sizing:border-box;color:#032f62;" >'</span>flex<span class="pl-pds" style="box-sizing:border-box;color:#032f62;" >'</span></span>,</span><br>
<span class="yes" style
@dantman
dantman / NavigationHeader.js
Created February 28, 2018 22:38
Overriding the left header button in a custom header
'use strict';
import React, {PureComponent} from 'react';
import {Header} from 'react-navigation';
export default class NavigationHeader extends PureComponent {
getScreenDetails = (screen, ...args) => {
const screenDetails = this.props.getScreenDetails(screen, ...args);
const {navigate, goBack} = screenDetails.navigation;
return {
@dantman
dantman / keybase.md
Created November 8, 2017 18:30
keybase.md

Keybase proof

I hereby claim:

  • I am dantman on github.
  • I am dantman (https://keybase.io/dantman) on keybase.
  • I have a public key ASC7jATCYRenYm-biehrUI-OGVElMbPiszWhH5-jXsJ6jQo

To claim this, I am signing this object:

@dantman
dantman / LoginButton.js
Created October 2, 2017 21:14
Custom MaterialDesign inspired login button used in one app
@Styles({
root: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
borderRadius: 2,
height: 48,
},
enabled: {
backgroundColor: colors.grey600,
@dantman
dantman / PersistentStore.cs
Last active September 26, 2017 14:56
VRUB Exposed classes/modules API idea
using VRUB;
[ExposedClass]
class PersistentStore : ExposedClass { // base class could use a different name
Dictionary<string, string> _temporaryStore = new Dictionary<string, string>();
Dictionary<string, string> _persistentStore = new Dictionary<string, string>();
[ExposedMethod]
public string Get(string key, bool temporary = false) {
render() {
const {styles, onLogout} = this;
const {onOverlayStateChanged} = this;
const {materialTheme, sections: rawSections, navigation, screenProps: {statusBarHeight}, user, activeCompany, company, teams} = this.props;
const {overlayOpen} = this.state;
const sections = navigation.state.routes::groupBy((route) => this._getScreenOptions(route.key).drawerSection);
const {companyList=[]} = user || {};
const children = [];
let first = true;