Created
August 19, 2017 03:27
-
-
Save Noitidart/da220f504d3b0070fe1413d079fcabb9 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// @flow | |
import React, { Component } from 'react' | |
import wrapDisplayName from 'recompose/wrapDisplayName' | |
function getDepth(element) { | |
let depth = 0; | |
let elementCur = element; | |
while (elementCur.parentElement) { | |
elementCur = elementCur.parentElement; | |
depth++; | |
} | |
return depth; | |
} | |
function markBranchNeedsClone(element) { | |
let elementCur = element; | |
while (elementCur) { | |
elementCur.needsClone = true; | |
elementCur = elementCur.parentElement; | |
} | |
} | |
type Predicate = Node => boolean; | |
type AddProps = {} | Node => {}; | |
type TreeElement = { | |
props?: { | |
children?: ChildrenArray | |
}, | |
childrenElements?: TreeElement[], | |
clone: Node, | |
depth: number, | |
id: number, | |
needsClone: boolean | |
} | |
// addProps must be defined within the ComponentDumb | |
// https://stackoverflow.com/a/7356528/1828637 | |
function isFunction(functionToCheck) { | |
var getType = {}; | |
return functionToCheck && getType.toString.call(functionToCheck) === '[object Function]'; | |
} | |
function addPropsIfHOCFactory(predicate: Predicate) { // | |
return function addPropsIfHOC(WrappedComponent: ComponentType) { // factory | |
return ( | |
class AddPropsIfWrap extends WrappedComponent { | |
static displayName = wrapDisplayName(WrappedComponent, 'AddPropsIfWrap') | |
render() { | |
const view = super.render(); | |
if (!this.addProps) return view; | |
// depth first - stack - last in first out | |
// iterate depth first until a Field is found | |
const viewElementNew = {node:view, parentElement:null}; | |
const tree = [viewElementNew]; // stack // parentElement is ref to parentElement in elements | |
const elementsByDepth = {}; // key is depth, value is array of element's at that depth | |
const elementsByParentId = {}; // key is elementId of parent | |
let elementId = 0; | |
// console.log('view:', view); | |
let depthMax = 0; | |
while (tree.length) { | |
const element: TreeElement = tree.pop(); | |
console.log('element.node:', element.node); | |
element.props = element.node && element.node.props ? element.node.props : undefined; | |
element.childrenElements = undefined; | |
element.clone = undefined; | |
element.depth = getDepth(element); | |
element.id = elementId++; | |
element.needsClone = false; // if true then clone, its set to true if props are changed | |
if (element.depth > depthMax) depthMax = element.depth; | |
if (!elementsByDepth[element.depth]) { | |
elementsByDepth[element.depth] = []; | |
} | |
elementsByDepth[element.depth].push(element); | |
const node = element.node; | |
const primative = typeof node; | |
if (primative === 'object' && node) { | |
if (predicate(node)) { | |
const addProps = isFunction(this.addProps) ? this.addProps(node) : this.addProps; | |
element.props = Object.assign({}, node.props ? node.props : undefined, addProps); | |
markBranchNeedsClone(element); | |
console.log('added props to node:', element.node); | |
} | |
} | |
if (node && node.props && node.props.children) { | |
const children = node.props.children; | |
const pushChild = child => { | |
const parent = element; | |
const childElement = { | |
node: child, | |
parentElement: parent | |
} | |
tree.push(childElement); | |
if (!elementsByParentId[parent.id]) elementsByParentId[parent.id] = []; | |
elementsByParentId[parent.id].push(childElement); | |
return childElement; | |
} | |
if (Array.isArray(children)) { | |
element.childrenElements = children.map(pushChild); | |
} else { | |
const child = children; | |
element.childrenElements = pushChild(child); | |
} | |
} | |
} | |
// do React.cloneElement from deepest first IF needsClone === true | |
let depth = depthMax + 1; | |
while (depth--) { | |
// console.log('doing now elementsByDepth[depth] of depth:', depth); | |
for (const element of elementsByDepth[depth]) { | |
if (typeof element.node === 'object' && element.node) { | |
if (!element.needsClone) { | |
element.clone = element.node; | |
} else { | |
let childrenClones = elementsByParentId[element.id]; | |
let hasKeys = false; | |
if (childrenClones) { | |
if (childrenClones.length === 1) { | |
childrenClones = childrenClones[0].clone; | |
} else { | |
childrenClones = childrenClones.map(element => { | |
if (element.node.key !== null) { | |
hasKeys = true; // im assuming if any one of them has a key, all the rest do | |
console.log('element.node.key', element.node.key); | |
} | |
return element.clone; | |
}); | |
console.log('mapping children! hasKeys:', hasKeys); | |
} | |
} | |
console.log('CLONING'); | |
if (childrenClones && Array.isArray(childrenClones) && !hasKeys) { | |
// as it doesnt have keys, need to spread children | |
element.clone = React.cloneElement(element.node, element.props, ...childrenClones); | |
} else { | |
element.clone = React.cloneElement(element.node, element.props, childrenClones); | |
} | |
} | |
} else { | |
// its a string, number etc | |
element.clone = element.node; | |
} | |
} | |
} | |
console.log('viewElementNew:', 'viewElementNew'); | |
// console.log('elementsByDepth:', elementsByDepth); | |
// console.log('elementsByParentId:', elementsByParentId); | |
return viewElementNew.clone; | |
} | |
} | |
) | |
} | |
} | |
export default addPropsIfHOCFactory |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment