Skip to content

Instantly share code, notes, and snippets.

@artalar
artalar / ImageEditor.jsx
Last active October 4, 2017 14:51
ImageEditor by react-cropper
import * as React from 'react';
import Dialog, { DialogActions, DialogTitle } from 'material-ui/Dialog';
import { withStyles } from 'material-ui/styles';
import Cropper from 'react-cropper';
import 'cropperjs/dist/cropper.css';
const styles = {
paper: {
backgroundColor: '#2781ca',
borderRadius: '5px',
import * as React from 'react';
import styled from 'styled-components';
import { CircularProgress } from 'material-ui/Progress';
const BlockUIBody = styled.div`
position: fixed;
background-color: rgba(255, 255, 255, 0.5);
top: 0;
left: 0;
display: flex;
@artalar
artalar / config-overrides.js
Created November 1, 2017 08:37
Add styled-components class naming with CRA
const { injectBabelPlugin } = require('react-app-rewired');
module.exports = (config, env) => {
config = injectBabelPlugin(
[
'babel-plugin-styled-components',
{
displayName: true,
},
@artalar
artalar / userReducer.jsx
Last active February 10, 2018 20:50
Example of declarative implementation of redux reducer by JSX
import * as React from 'react';
import PropTypes from 'prop-types';
// unexisted library, just for example
import { render } from 'react-store';
import { requestUserData, successUserData, errorUserData } from 'actions'
const typeRolesList = PropTypes.arrayOf(PropTypes.shape({
name: PropTypes.string.isRequired,
privelege: PropTypes.string.isRequired,
import { inDevMode } from './enviroment';
const isObject = object => typeof object === 'object' && object !== null;
function Logger(location, addSnapshot) {
const logs = [];
this.setLog = (previosObject, newObject, key, description = 'objects not equal') => {
const log = {
previosObject,
@artalar
artalar / contextFactory.js
Last active March 31, 2018 23:37
contextFactory
import * as React from 'react';
import { createSubscription } from 'create-subscription';
const shallowCompare = (newObj, oldObj) => {
const newObjKeys = Object.keys(newObj);
const oldObjKeys = Object.keys(oldObj);
return (
newObjKeys.length === oldObjKeys.length && newObjKeys.every(key => newObj[key] === oldObj[key])
);
};
const isObject = o => typeof o === 'object' && o !== null;
const merge = (source, key, update) =>
Array.isArray(source)
? [...source.slice(0, key > 0 ? key - 1 : 0), update, ...source.slice(key + 1)]
: { ...source, [key]: update };
const mergeIn = (source, target, update) =>
source === target
? Array.isArray(source) ? update : { ...source, ...update }
const spreadAssignmentOperatorPolyfill = (assignable, extending) => {
if (assignable === null || assignable === undefined) {
throw new TypeError(`${assignable} is not iterable`);
} else if (typeof assignable === "object" && !Array.isArray(assignable)) {
return { ...assignable, ...extending };
}
const assignableIterator = assignable[Symbol.iterator];
if (!assignableIterator) {
throw new TypeError(`${assignable} is not iterable`);
}
import { createRootPath, immutablePreset } from 'pathon';
const createLogger = id => (...args) => console.log(`ID: ${id}`, ...args);
const pathSome = createRootPath(
// initial state
{ list: [{ id: 0, value: Math.random() }] },
// default setters and getters (for `path` to)
immutablePreset
);
import { inDevMode } from './enviroment';
const isObject = object => typeof object === 'object' && object !== null;
function Logger(location, addSnapshot) {
const logs = [];
this.setLog = (previosObject, newObject, key, description = 'objects not equal') => {
const log = {
previosObject,