export default function cloneWithRef(
element: any,
newRef: any,
): React.ReactElement<any> {
const previousRef = element.ref
invariant(
typeof previousRef !== 'string',
'Cannot connect React DnD to an element with an existing string ref. ' +
'Please convert it to use a callback ref instead, or wrap it into a <span> or <div>. ' +
'Read more: https://facebook.github.io/react/docs/more-about-refs.html#the-ref-callback-attribute',
)
if (!previousRef) {
// When there is no ref on the element, use the new ref directly
return cloneElement(element, {
ref: newRef,
})
}
return cloneElement(element, {
ref: (node: any) => {
newRef(node)
if (previousRef) {
previousRef(node)
}
},
})
}
leaving.forEach(key => {
const child = indexedChildren[key];
const newChild = newlyLeaving[key]
? React.cloneElement(child, {
_pose: exitPose,
onPoseComplete: (pose: CurrentPose) => {
if (pose === exitPose) scheduleChildRemoval(key);
const { onPoseComplete } = child.props;
if (onPoseComplete) onPoseComplete(pose);
},
popFromFlow: flipMove
})
: child;
const insertionIndex = prevKeys.indexOf(key);
// We might have had new items added before this item in the same
// render. So here we find the correct item to anchor to. This is
// a pretty shitty algo. But it is also the one we have
// if (insertionIndex) {
// TODO: Write a shitty algo
// }
indexedChildren[child.key] = newChild;
nextState.displayedChildren.splice(
insertionIndex,
0,
hasPropsForChildren ? prependProps(newChild, propsForChildren) : newChild
);
});
Children.forEach(targetChildren, (child: ReactElement<any>) => {
if (!child) return;
const isEntering = enteringKeys.has(getKey(child));
const baseProps = {
flipMove,
measureSelf: popFromLayoutOnExit
};
if (isEntering && (enterAfterExit && leavingKeys.length)) return;
const cloneProps: { [key: string]: any } = isEntering
? {
initialPose: animateOnMount || hasMounted ? preEnterPose : undefined,
pose: enterPose,
onPoseComplete: null,
...baseProps,
...props
}
: {
...baseProps,
...props
};
children.push(cloneElement(child, cloneProps));
});
export const addClassnames = (
classNames: Array<string | undefined>,
elem: React.ReactElement<any>
): React.ReactElement<any> => React.cloneElement(
elem,
{
className: classnames(...classNames.concat(elem.props.className))
}
)
const reactMapper = (childObj, root) => {
const reactChildren = Object.keys(childObj).map(key => childObj[key]);
if (root) {
return cloneElement(root, root.props, ...reactChildren);
}
return reactChildren[0];
};
connectDragSource: (element: React.ReactElement<any>) => {
return React.cloneElement(element, {
draggable: true,
onDragStart: (event: React.DragEvent<any>) => {
if (handler.start) {
handler.start(this.props as TInner)(event);
}
(this.props as any).dispatch(dndStarted(handler.getData(this.props), event))
},
onDragEnd: (event) => (this.props as any).dispatch(dndEnded(handler.getData(this.props), event)),
})
},
return setElementAtPath(decoratedFixture, elPath, element => {
if (!isRefSupported(element.type)) {
return element;
}
return React.cloneElement(element, {
ref: getDecoratedRef(
(element as ElementWithRef).ref,
spyRef,
elPath,
cachedRefHandlers
)
});
});
function traceReactElementPattern(depth: number): ReactElementPattern<ReactElement<any>> {
return {
String(el, type, children) {
console.log(depth, "E/S", type, mapReactNode(typeofReactNodePattern)(children));
if (children) {
const newChildren = mapReactNode(traceReactNodePattern(depth + 1))(children);
return cloneElement(el, el.props, newChildren);
} else {
return el;
}
},
Component(el, type) {
console.log(depth, "E/C", type);
return createElement(wrapComponentType(type, mapReactElement(traceReactElementPattern(depth + 1))), el.props);
},
};
}
export function renderComponent(component:RenderComponentType<any>, props={}, children=null){
if (component["prototype"] instanceof React.Component || (component["prototype"] && component["prototype"].isReactComponent)){
return React.createElement(component as React.ComponentClass<any>, props, children)
} else if (React.isValidElement(component)){
return React.cloneElement(component as Element, props, children);
} else if ((typeof component) === 'function'){
const funProps = (children != null) ? defaults(props, {children}) : props
return React.createElement(FunctionComponent, {
key: props["key"],
fun: component,
props: funProps
})
}
console.warn("Invalid component", component)
return null
}
export function renderComponent(component:RenderComponentType<any>, props={}, children=null){
let isReactComponent = (
component["prototype"] instanceof React.Component ||
(component["prototype"] && component["prototype"].isReactComponent) ||
typeof component === 'function'
)
if (isReactComponent){
return React.createElement(
component as React.ComponentClass<any>,
props, children
)
} else if (React.isValidElement(component)){
return React.cloneElement(
component as Element,
omitBy(props, isUndefined), children
);
}
console.warn("Invalid component", component)
return null
}
