Skip to content

Instantly share code, notes, and snippets.

const COLORS = {
info: ['#1E88E5', '#90CAF9'],
success: ['#388E3C', '#A5D6A7'],
error: ['#E53935', '#EF9A9A'],
warning: ['#F4511E', '#FFAB91'],
}
const print = Object.entries(COLORS).reduce(
(api, [name, colors]) => ({
[name]: (shortLabel, longerMessage, optionalSuffix = '') =>
@schabluk
schabluk / Service.js
Last active May 30, 2018 18:37
Service dependency for MobX State Tree
import axios, { get, CancelToken } from 'axios'
import faker from 'faker'
//
// Only data property will be returned from the reuquest. This will simplify
// data processing, as it won't be neccesary to call .then() each time
// to return the request.data.
// See: https://github.com/axios/axios#response-schema
//
// The status codes validation, if needed, should be done in 'validateStatus'
@schabluk
schabluk / hexToRGB.js
Created May 24, 2018 09:52
HEX color to RGB with alpha
const hexToRGB = (hex, alpha) => {
const r = parseInt(hex.slice(1, 3), 16)
const g = parseInt(hex.slice(3, 5), 16)
const b = parseInt(hex.slice(5, 7), 16)
if (alpha) return `rgba(${r}, ${g}, ${b}, ${alpha})`
return `rgb(${r}, ${g}, ${b})`
}
@schabluk
schabluk / cartesian.js
Created October 10, 2017 07:04
Cartesian of arrays
const f = (a, b) => [].concat(...a.map(d => b.map(e => [].concat(d, e))))
const cartesian = (a, b, ...c) => (b ? cartesian(f(a, b), ...c) : a)
cartesian.apply(this, [["A", "B"], ["C", "D"]])
@schabluk
schabluk / findStyleRanges.js
Created June 27, 2017 21:49
draft-js findStyleRanges
const stylesFilter = v => v.hasStyle('HIGHLIGHT')
editorState.getCurrentContent().getBlockForKey(anchorKey).findStyleRanges(stylesFilter, (start, end) => {
contentState = removeStyle(contentState, anchorKey, start, end, 'HIGHLIGHT')
})
@schabluk
schabluk / indexOfNode.js
Created May 16, 2017 12:37
Getting index of node in HTMLCollection
const children = [].slice.call(this.snippetsList.node.children)
console.log(
data.node,
children.indexOf(data.node)
)
@schabluk
schabluk / draft-js-snippets.js
Created May 3, 2017 07:56
Draft JS code snippets
const startKey = editorState.getSelection().getStartKey()
const startOffset = editorState.getSelection().getStartOffset()
const block = editorState.getCurrentContent().getBlockForKey(startKey)
const entityKey = block.getEntityAt(startOffset)
@schabluk
schabluk / Item.jsx
Created February 21, 2017 10:29
Stateless Component
import React, { PropTypes } from 'react'
/**
* Moving click handler function outside of the component
* follows the separation of concerns principle (SoC).
*/
const _handleClick = (onSelect, event, id) => {
// Additional steps before handling action.
event.preventDefault()
event.stopPropagation()
@schabluk
schabluk / ract-dropzone-image.js
Created February 10, 2017 11:55
React-Dropzone get image width, height and base64 data
onDrop = (acceptedFiles, rejectedFiles) => {
const file = acceptedFiles.find(f => f)
const i = new Image()
i.onload = () => {
let reader = new FileReader()
reader.readAsDataURL(file)
reader.onload = () => {
console.log({
src: file.preview,
@schabluk
schabluk / DraftLineNumbers.js
Last active March 31, 2023 15:45
Display line numbers is Draft-JS Editor
// Required Draf-js version: 0.10.
// Live example: https://jsfiddle.net/schabluk/gh2gt22n/
import React from 'react'
import ReactDOM from 'react-dom'
import {Editor, EditorState, EditorBlock} from 'draft-js'
class Line extends React.Component {
render () {
const blockMap = this.props.contentState.getBlockMap().toArray()