Skip to content

Instantly share code, notes, and snippets.

View srph's full-sized avatar
🛠️
Building @Stride-Labs Frontend

Kier Borromeo srph

🛠️
Building @Stride-Labs Frontend
View GitHub Profile
@srph
srph / Popover.js
Created July 22, 2017 00:56
React.js: Popover with boundary checking
import PropTypes from 'prop-types';
import React, { Component, cloneElement } from 'react';
import {findDOMNode} from 'react-dom';
import Transition from 'react-addons-css-transition-group';
import {Gateway} from 'react-gateway';
import Outside from 'react-click-outside';
import classnames from 'classnames';
import withinBoundaries from './withinBoundaries';
// @TODO: Animations. This became "undoable" when we added boundary checking
@srph
srph / ButtonLoader.js
Created July 8, 2017 16:29
React.js: Basic button loader
import React, {Component, PropTypes as T} from 'react';
import DotLoader from '@/components/DotLoader';
function ButtonLoader({loading, ...props}) {
return (
<button {...props} disabled={loading || disabled}>
{loading ? <DotLoader /> : props.children}
</button>
);
}
@srph
srph / index.js
Created June 16, 2017 08:26
React: react-gateway context workaround (https://github.com/cloudflare/react-gateway/issues/4)
class PassContext extends React.Component {
getChildContext() {
return {
dragDropManager: this.props.dragDropManager
};
}
render() {
return this.props.children;
}
@srph
srph / SearchInput.js
Last active June 13, 2017 06:22
React: Example SearchInput
import React, {Component, PropTypes as T} from 'react';
import history from 'app/history';
class SearchInput extends Component {
constructor(props, context) {
super(props);
this.state = {
input: context.location.query.search || ''
}
@srph
srph / Column.js
Last active June 10, 2017 05:54
React: DataTable API idea
import React, {Component, PropTypes as T} from 'react';
export default class Column extends Component {
render() {
return null;
}
}
Column.propTypes = {
heading: T.string,
@srph
srph / index.js
Created June 5, 2017 02:43
JS: Get placeholder index
/**
* Get placeholder index, like for example in a list, through node top offset.
* Used for drag-n-drops.
*
* @param {number} y The actual top offset
* @param {number} scroll Scroll count
* @return {number}
*/
function getPlaceholderIndex(y, scroll) {
const height = 70;
@srph
srph / index.js
Created June 2, 2017 10:28
JS: rle
function rle(input) {
let result = ''
while (input.length) {
const capture = new RegExp(`${input[0]}+`)
const captured = capture.exec(input)[0]
result += `${captured.length}${captured[0]}`
input = input.substr(captured.length)
}
@srph
srph / index.js
Last active March 14, 2022 09:53
React: File upload component example (attachments)
import React, {Component, createElement, DOM} from 'react';
import PropTypes from 'prop-types';
import c from 'classnames';
import ProgressBar from 'app/components/ProgressBar';
import Icon from 'app/components/Icon';
import mime from 'mime';
import axios from 'axios';
import put from '101/put';
import del from '101/del';
@srph
srph / index.js
Last active May 26, 2017 11:40
JS: Immutably insert value to an array
/**
* Immutably insert attachments
*
* @example
* insert([null, null, null, null, 5, null], 2, 9)
* [null, null, 9, null, null, 5, null]
*
* @param {array} array
* @param {number} index
* @param {mixed} value
@srph
srph / index.js
Created May 26, 2017 10:45
JS: Array to object
/**
* Converts array to object with sparse values.
* Useful when for example, using a dictionary to set mass ids to a value
* { loading: { 1: true, 4: true } }
*
* @param {array} array Primitive values
* @return {object}
*/
export default function objectify(array, value) {
const result = {};