Как вы можете использовать ContextualMenu с Persona в Office Fabri c UI React? - PullRequest
Новая
       56

Как вы можете использовать ContextualMenu с Persona в Office Fabri c UI React?

0 голосов
/ 02 марта 2020

Я использую Office Fabri c UI React . Я хочу создать ContextualMenu, который используется с объектом Persona.

В этом примере напрямую используется ContextualMenu, чтобы показать, как его можно присоединить к произвольным элементам. Остальные примеры используют ContextualMenu через компоненты Fabri c Button.

Microsoft предоставляет пример применения ContextualMenu к любому произвольному объекту, однако, похоже, он не работает с Persona объект. Компонент Persona не имеет свойства ref, и назначение ссылки на свойство componentRef не похоже на работу.

Кажется, что компонент Persona имеет свойство, унаследованное от интерфейс HTMLAttributes<T>: contextMenu?: string;, но я не понимаю, как можно использовать необязательную строку с ContextualMenu. 

const AppHeaderProfile: React.FunctionComponent<IAppHeaderProfileProps> = () => {
  const personaRef = React.useRef(null);
  const [showContextualMenu, setShowContextualMenu] = React.useState(false);
  const onShowContextualMenu = useConstCallback(() =>
    setShowContextualMenu(true)
  );
  const onHideContextualMenu = useConstCallback(() =>
    setShowContextualMenu(false)
  );

  const menuItems: IContextualMenuItem[] = [
    {
      key: "profile",
      text: "My Profile",
      onclick: () => console.log("My Profile clicked")
    }
  ];

  return (
    <div className="app-header-profile">
      <Persona
        className="user"
        componentRef={personaRef}
        size={PersonaSize.size32}
        onClick={onShowContextualMenu}
      />
      <ContextualMenu
        items={menuItems}
        target={personaRef}
        hidden={!showContextualMenu}
        onItemClick={onHideContextualMenu}
        onDismiss={onHideContextualMenu}
      />
    </div>
  );
};

1 Ответ

0 голосов
/ 02 марта 2020

Вы можете использовать опору onRenderPrimaryText или любую другую onRender опору для рендеринга ваших собственных вещей. Затем вы можете стилизовать кнопку в соответствии с вашими потребностями. 

<Persona
  {...examplePersona}
  onRenderPrimaryText={(props: IPersonaProps) => (
    <Button
      menuProps={{
        items: [
          { key: "1", text: "Option1" },
          { key: "2", text: "Option2" }
        ]
      }}
    >
      {props.text}
    </Button>
  )}
/>;

Надеюсь, это поможет!

...