Investigate enabling methods on ref holders

[asklar]

Instead of the command being a static method of the class

Is it possible to wire this up so that passing in the ref holder directly works?

Originally posted by @NickGerleman in #128 (comment)

[asklar]

Here's what I'm thinking:

in Types.tsx:

export class DependencyObjectRef<T> {
  protected readonly _ref: React.MutableRefObject<T | null>;
  public constructor() {
    this._ref = React.useRef<T>(null);
  }

  public get current() : T | null {
    return this._ref.current;
  }
  
  public set current(v : T | null) {
    this._ref.current = v;
  }
}

export class MenuFlyoutRef extends DependencyObjectRef<MenuFlyout>{  
  public ShowAt(args: { point: Point, }) {
    if (this._ref.current !== null) {
      MenuFlyout.ShowAt(this._ref as React.MutableRefObject<MenuFlyout>, args);
    }
  }
}

export class MenuFlyout extends React.Component<MenuFlyoutProps> {
  render() {
    return <NativeXamlControl {...this.props} type='Windows.UI.Xaml.Controls.MenuFlyout' />;
  }
  static useRef() {
    return new MenuFlyoutRef();
  }
  static ShowAt(ref: React.MutableRefObject<MenuFlyout>, args: { point: Point,  }) {
    const tag = findNodeHandle(ref.current);
    UIManager.dispatchViewManagerCommand(tag, xamlCommands.ShowAt, [args]);
  }
};

then at the usage site:

const menu = MenuFlyout.useRef();
// ...
return <TextBlock
            text="Hello"
            onTapped={e => {
              menu.ShowAt({point: {x: x, y: 42}});
            }}
            ref={t => {
              _tbRef.current = t;
            }}>
            <MenuFlyout
              ref={m => {
                menu.current = m;
              }}>
              <MenuFlyoutItem text="menu option" />
            </MenuFlyout>
          </TextBlock>

@NickGerleman do you think there is a better way to approach this rather than creating named ref holders that have the extra methods for every class and making consumers use the custom useRef? does TS have a concept of "extension methods"?