Skip to content

Instantly share code, notes, and snippets.

@chrismllr
chrismllr / style-fns.js
Last active May 30, 2017 14:48
Example of css functions/ mappings in JS
export function fontPrimary () {
return 'Source Sans Pro, sans-serif';
}
export function fontSecondary () {
return 'Lato, sans-serif';
}
export function textStyle (style) {
if (style === 'upper') {
const dependencies = new Map();
export class Container {
static resolve(Class) {
const deps = dependencies.get(Class);
return new Class(...deps);
}
static registerDependencies(Class, deps) {
dependencies.set(Class, deps);
@chrismllr
chrismllr / DOM.js
Last active July 10, 2017 22:41
Helpers for generating DOM nodes.
import set from 'lodash.set';
/*
New DOM node.
arguments:
nodeType (string) 'div': name of the DOM element
children (ArrayOf[n, t, svg]): Child nodes
opts (Object): element attributes. className, id, etc
Usage:
@chrismllr
chrismllr / compose.js
Created August 6, 2017 22:56
Model w/ factories
export function compose (factories) {
return function ontoEntity (entity) {
const factoryAdditions = factories.reduce((composed, fn) => {
return { ...composed, ...fn(entity) };
}, {});
return {
...entity,
...factoryAdditions
};
@chrismllr
chrismllr / withNavigationHandlers.js
Created October 30, 2017 20:01
react-native-navigation: navigation handler HOC
/* Usage
const navigationHandlers = [
{
predicate: props => props.currentUser.isAuthenticated === false,
handler: navigator => {
navigator.resetTo({
screen: LOGIN_SCREEN,
animationType: 'fade'
});
}
@chrismllr
chrismllr / happy-input.jsx
Last active April 24, 2018 16:36
Composing React Components
<Spacing bottom="30px">
<Label>Username</Label>
<TextInput
value={this.state.userName}
onChange={this.updateUsername}
/>
</Spacing>
<Input
labelText="Username"
value={this.state.username}
onChange={this.updateUsername}
/>
<Input
shouldShowLabel={false}
// labelText="Username" - Don't need this anymore
value={this.state.username}
style={{ marginBottom: '30px' }}
onChange={this.updateUsername}
/>
<Input
shouldShowLabel={false}
// labelText=”Username” - Still don't need this
value={this.state.username}
inputStyle={{ padding: ‘12px’ }}
wrapperStyle={{ marginBottom: ‘30px’ }}
onChange={this.updateUsername}
/>
@chrismllr
chrismllr / confirm-action.js
Created February 11, 2019 15:37
Confirm action service
import Service from '@ember/service';
import { setProperties } from '@ember/object';
import { defer } from 'rsvp';
export default Service.extend({
showPrompt: false,
title: null,
message: null,
_deferred: null,