Skip to content

Instantly share code, notes, and snippets.

View jossmac's full-sized avatar
Building Keystatic

Joss Mackison jossmac

Building Keystatic
View GitHub Profile
@jossmac
jossmac / renderImageSelect.js
Created August 2, 2016 09:20
Temporarily removed the CloudinaryImageField.js renderImageSelect method
renderImageSelect () {
var selectPrefix = this.props.selectPrefix;
var self = this;
var getOptions = function (input, callback) {
// build our url, accounting for selectPrefix
var uri = Keystone.adminPath + '/api/cloudinary/autocomplete';
if (selectPrefix) {
uri = uri + '?prefix=' + selectPrefix;
}
@jossmac
jossmac / withPseudoState.jsx
Last active July 6, 2017 00:22
A higher order component to replace pseudo-states when working with a CSS in JS solution
import React, { Component } from 'react';
export default function withPseudoState(WrappedComponent) {
return class ComponentWithPseudoState extends Component {
actionKeys = ['Enter', ' ']
state = {
isActive: false,
isFocus: false,
isHover: false,
}
@jossmac
jossmac / with-context-as-props.js
Last active November 13, 2017 03:30
A HOC for moving props to context. Used as a conduit to maintain context when rendering to a different subtree.
import React, { Component } from 'react';
import PropTypes from 'prop-types';
const DefaultBaseComponent = props => <div {...props} />;
const withContextFromProps = (
propTypes: PropTypes.object,
BaseComponent: PropTypes.func = DefaultBaseComponent
) => {
class ContextProps extends Component {
@jossmac
jossmac / animatedScrollTo.js
Last active February 23, 2018 00:02
Scroll Utilities
import raf from 'raf';
/**
@param t: time (elapsed)
@param b: initial value
@param c: amount of change
@param d: duration
*/
function easeOutCubic(t: number, b: number, c: number, d: number): number {
return c * ((t = t / d - 1) * t * t + 1) + b;
@jossmac
jossmac / getFn.js
Last active February 28, 2018 08:19
🤞Here's hoping the optional chaining operator lands
function get(obj, ...props) {
const val = obj[props[0]];
if (props.length === 1 || !val) return val;
const rest = props.slice(1);
return get.apply(null, [val, ...rest]);
}
@jossmac
jossmac / PropertyToggle.js
Last active April 17, 2018 09:04
React helper component for toggling styles and attributes
// @flow
import React, { PureComponent } from 'react';
type ObjectType = { [key: string]: string };
type Keys = Array<string>;
type Props = {
attributes: ObjectType,
styles: ObjectType,
target: HTMLElement,
@jossmac
jossmac / requiredParam.js
Last active April 18, 2018 01:24
Helper function for required parameters, from http://tinyurl.com/ychkf5oq
function requiredParam (param) {
const requiredParamError = new Error(
`Required parameter, "${param}" is missing.`
)
// preserve original stack trace
if (typeof Error.captureStackTrace === ‘function’) {
Error.captureStackTrace(
requiredParamError,
requiredParam
)
@jossmac
jossmac / pipe.js
Created April 18, 2018 01:29
Helper function for composing functions together
function pipe(...fns) {
return param => fns.reduce(
(result, fn) => fn(result),
param
)
}
/*
The above function takes a list of functions and returns a function that can
apply the list from left to right, starting with a given parameter and then
/**
* Clamp value between
* Creates a function that will restrict a given value between `min` and `max`
* @param {number} min
* @param {number} max
* @return {number}
*/
const clamp = (min, max) => (v) => Math.min(Math.max(v, min), max);
/*
@jossmac
jossmac / asyncQuerySelector.js
Created May 31, 2018 05:47
An async querySelector equivalent
import "babel-polyfill";
const asyncQuerySelector = async (node, query) => {
try {
return await (query ? node.querySelector(query) : node);
} catch (error) {
console.error(`Cannot find ${query ? `${query} in`: ''} ${node}.`, error);
return null;
}
};