Use render prop in withModalHandlers for target (#748)

* Use render prop for target in withModalHandlers

I'm working on code splitting things with suspense and things are breaking because of the findDOMNode calls in react-node-resolver

Slightly related to this: @jossmac, i think you'll like this, reactjs/rfcs#97

* Update types

* Fix linting error

* Fix a thing

* Fix thing

Author: emmatown

packages/admin-ui/client/components/ListTable.js

@@ -195,8 +195,8 @@ class ListRow extends Component {
   render() {
     const { list, link, isSelected, item, itemErrors, fields } = this.props;
 
-    const row = (
-      <TableRow>
+    const row = props => (
+      <TableRow {...props}>
         <BodyCell isSelected={isSelected} key="checkbox">
           <CheckboxPrimitive
             checked={isSelected}

packages/admin-ui/client/components/Popout.js

@@ -89,8 +89,8 @@ export const Popout = ({
   target,
   ...props
 }: Props) => {
-  const defaultTarget = (
-    <Button>
+  const defaultTarget = props => (
+    <Button {...props}>
       {buttonLabel}
       <DisclosureArrow />
     </Button>

packages/admin-ui/client/pages/List/Filters/ActiveFilters.js

@@ -33,11 +33,16 @@ export default function ActiveFilters({ filterList, onClear, onRemove, onUpdate
                   key={label}
                   onChange={onUpdate}
                   filter={filter}
-                  target={
-                    <Pill appearance="primary" onRemove={onRemove(filter)} style={pillStyle}>
+                  target={props => (
+                    <Pill
+                      {...props}
+                      appearance="primary"
+                      onRemove={onRemove(filter)}
+                      style={pillStyle}
+                    >
                       {label}
                     </Pill>
-                  }
+                  )}
                 />
               );
             })

packages/admin-ui/client/pages/List/ListDetails.js

@@ -310,11 +310,11 @@ class ListDetails extends Component<Props, State> {
     return (
       <Dropdown
         align="right"
-        target={
-          <IconButton variant="nuance" icon={KebabVerticalIcon} id="ks-list-dropdown">
+        target={props => (
+          <IconButton {...props} variant="nuance" icon={KebabVerticalIcon} id="ks-list-dropdown">
             <A11yText>Show more...</A11yText>
           </IconButton>
-        }
+        )}
         items={items}
       />
     );
@@ -362,12 +362,12 @@ class ListDetails extends Component<Props, State> {
                     Hold <Kbd>alt</Kbd> to toggle ascending/descending
                   </Note>
                 }
-                target={
-                  <SortButton>
+                target={props => (
+                  <SortButton {...props}>
                     {sortBy.field.label.toLowerCase()}
                     <DisclosureArrow size="0.2em" />
                   </SortButton>
-                }
+                )}
               >
                 <SortSelect
                   popoutRef={this.sortPopoutRef}

packages/admin-ui/client/pages/List/MoreDropdown.js

@@ -7,8 +7,8 @@ import { IconButton } from '@arch-ui/button';
 import Dropdown from '@arch-ui/dropdown';
 import { useMeasure } from '@arch-ui/hooks';
 
-let dropdownTarget = (
-  <IconButton variant="nuance" icon={KebabVerticalIcon} id="ks-list-dropdown">
+let dropdownTarget = props => (
+  <IconButton {...props} variant="nuance" icon={KebabVerticalIcon} id="ks-list-dropdown">
     <A11yText>Show more...</A11yText>
   </IconButton>
 );

packages/admin-ui/client/pages/StyleGuide/Components/Modals.js

@@ -47,25 +47,30 @@ export default class ModalGuide extends Component {
         <h4>Dropdowns</h4>
         <FlexGroup justify="space-between">
           {['left', 'right'].map(a => (
-            <Dropdown align={a} key={a} target={<Button>Align {a}</Button>} items={dropdownItems} />
+            <Dropdown
+              align={a}
+              key={a}
+              target={props => <Button {...props}>Align {a}</Button>}
+              items={dropdownItems}
+            />
           ))}
         </FlexGroup>
 
         <h4>Popouts</h4>
         <FlexGroup justify="space-between">
-          <Popout target={<Button>Left</Button>}>
+          <Popout target={props => <Button {...props}>Left</Button>}>
             <PopoutContent>Left</PopoutContent>
           </Popout>
-          <Popout target={<Button>Intermediate Left</Button>}>
+          <Popout target={props => <Button {...props}>Intermediate Left</Button>}>
             <PopoutContent>Intermediate Left</PopoutContent>
           </Popout>
-          <Popout target={<Button>Middle</Button>}>
+          <Popout target={props => <Button {...props}>Middle</Button>}>
             <PopoutContent>Middle</PopoutContent>
           </Popout>
-          <Popout target={<Button>Intermediate Right</Button>}>
+          <Popout target={props => <Button {...props}>Intermediate Right</Button>}>
             <PopoutContent>Intermediate Right</PopoutContent>
           </Popout>
-          <Popout target={<Button>Right</Button>}>
+          <Popout target={props => <Button {...props}>Right</Button>}>
             <PopoutContent>Right</PopoutContent>
           </Popout>
         </FlexGroup>

packages/arch/packages/modal-utils/src/withModalHandlers.js

@@ -1,19 +1,25 @@
 // @flow
 
-import React, { cloneElement, Component, Fragment, type ComponentType, type Element } from 'react';
-import NodeResolver from 'react-node-resolver';
+import React, { Component, Fragment, type ComponentType, type Node, memo } from 'react';
 import ScrollLock from 'react-scrolllock';
 import { TransitionProvider } from './transitions';
 
 type GenericFn = any => mixed;
 export type CloseType = (event: Event) => void;
+type TargetArg = {
+  isActive: boolean,
+  onClick?: Function,
+  onContextMenu?: Function,
+  ref: Function,
+};
+
 export type ModalHandlerProps = {
   close: CloseType,
   defaultIsOpen: boolean,
   mode: 'click' | 'contextmenu',
   onClose: GenericFn,
   onOpen: GenericFn,
-  target: Element<*>,
+  target: TargetArg => Node,
 };
 type State = { isOpen: boolean, clientX: number, clientY: number };
 type Config = { Transition: (*) => * };
@@ -23,6 +29,13 @@ function getDisplayName(C) {
 }
 const NOOP = () => {};
 
+let Target = memo(function Target({ isOpen, mode, target, targetRef, open, toggle }) {
+  const cloneProps: TargetArg = { isActive: isOpen, ref: targetRef };
+  if (mode === 'click') cloneProps.onClick = toggle;
+  if (mode === 'contextmenu') cloneProps.onContextMenu = open;
+  return target(cloneProps);
+});
+
 export default function withModalHandlers(
   WrappedComponent: ComponentType<*>,
   { Transition }: Config
@@ -105,15 +118,16 @@ export default function withModalHandlers(
       const { mode, onClose, onOpen, target } = this.props;
       const { clientX, clientY, isOpen } = this.state;
 
-      const cloneProps = {};
-      if (isOpen) cloneProps.isActive = true;
-      if (mode === 'click') cloneProps.onClick = this.toggle;
-      if (mode === 'contextmenu') cloneProps.onContextMenu = this.open;
-
-      // TODO: prefer functional children that pass refs + snapshot to the target node
       return (
         <Fragment>
-          <NodeResolver innerRef={this.getTarget}>{cloneElement(target, cloneProps)}</NodeResolver>
+          <Target
+            targetRef={this.getTarget}
+            target={target}
+            mode={mode}
+            isOpen={isOpen}
+            toggle={this.toggle}
+            open={this.open}
+          />
           {isOpen ? <ScrollLock /> : null}
           <TransitionProvider isOpen={isOpen} onEntered={onOpen} onExited={onClose}>
             {transitionState => (

packages/fields/types/CalendarDay/views/Field.js

@@ -28,8 +28,8 @@ export default class CalendarDayField extends Component {
   render() {
     const { autoFocus, field, value } = this.props;
     const htmlID = `ks-input-${field.path}`;
-    const target = (
-      <Button autoFocus={autoFocus} id={htmlID} variant="ghost">
+    const target = props => (
+      <Button {...props} autoFocus={autoFocus} id={htmlID} variant="ghost">
         {value ? format(value, this.props.field.config.format || 'Do MMM YYYY') : 'Set Date'}
       </Button>
     );

packages/fields/types/Color/views/Field.js

@@ -14,8 +14,8 @@ const ColorField = ({ field, value: serverValue, error, onChange }) => {
   const htmlID = `ks-input-${field.path}`;
   const canRead = !(error instanceof Error && error.name === 'AccessDeniedError');
 
-  const target = (
-    <Button variant="ghost">
+  const target = props => (
+    <Button {...props} variant="ghost">
       {value ? (
         <React.Fragment>
           <div

packages/fields/types/DateTime/views/Field.js

@@ -43,8 +43,8 @@ const CalendarDayField = ({ autoFocus, field, onChange, value }: Props) => {
   const { date, time, offset } = parsedDate;
 
   const htmlID = `ks-input-${field.path}`;
-  const target = (
-    <Button autoFocus={autoFocus} id={htmlID} variant="ghost">
+  const target = props => (
+    <Button {...props} autoFocus={autoFocus} id={htmlID} variant="ghost">
       {value
         ? format(date + ' ' + time + offset, field.config.format || 'Do MMM YYYY')
         : 'Set Date & Time'}