antd#PopoverProps TypeScript Examples

The following examples show how to use antd#PopoverProps. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.

Example #1

Source File: index.tsx From datart with Apache License 2.0

6 votes

export function Popup({
  content,
  overlayClassName,
  onVisibleChange,
  ...rest
}: PopoverProps) {
  const [visible, setVisible] = useState(false);

  const visibleChange = useCallback(
    v => {
      setVisible(v);
      onVisibleChange && onVisibleChange(v);
    },
    [onVisibleChange],
  );

  const onClose = useCallback(() => {
    setVisible(false);
  }, []);

  const injectedContent = useMemo(
    () =>
      isValidElement(content) ? cloneElement(content, { onClose }) : content,
    [content, onClose],
  );

  const className = mergeClassNames(overlayClassName, 'datart-popup');
  return (
    <Popover
      {...rest}
      overlayClassName={className}
      content={injectedContent}
      visible={visible}
      onVisibleChange={visibleChange}
    />
  );
}

Example #2

Source File: user-menu.tsx From erda-ui with GNU Affero General Public License v3.0

5 votes

UserMenu = ({
  placement,
  size,
  className = '',
  ...rest
}: Merge<PopoverProps, { size?: number; className?: string }>) => {
  const loginUser = userStore.useStore((s) => s.loginUser);
  const avatar = loginUser.avatar ? ossImg(loginUser.avatar, { w: 32 }) : undefined;

  const operations = [
    ...insertWhen(!process.env.FOR_COMMUNITY && !!loginUser.isSysAdmin, [
      {
        icon: <ErdaIcon className="mr-1" type="yunying" size="16" />,
        title: i18n.t('operation manage platform'),
        onClick: () => {
          window.localStorage.setItem('lastOrg', window.location.pathname.split('/')[1]);
          if (erdaEnv.UI_PUBLIC_ADDR) {
            window.location.href = `${window.location.protocol}//${erdaEnv.UI_PUBLIC_ADDR}/-/sysAdmin`; // jump to wildcard domain
          }
        },
      },
    ]),
    ...insertWhen(loginUser.isNewUser || !!erdaEnv.UC_PUBLIC_URL, [
      {
        icon: <ErdaIcon className="mr-1" type="shezhi" size="16" />,
        title: i18n.t('layout:Account Settings'),
        onClick: () => {
          window.open(loginUser.isNewUser ? UC_USER_SETTINGS : erdaEnv.UC_PUBLIC_URL);
        },
      },
    ]),
    {
      icon: <ErdaIcon className="mr-1" type="tuichu" size="16" />,
      title: i18n.t('layout:Logout'),
      onClick: () => userStore.effects.logout(),
      danger: true,
    },
  ];

  const nickOrName = loginUser.nick || loginUser.name;
  const nick = getAvatarChars(nickOrName);

  return (
    <Popover
      {...rest}
      placement={placement || 'rightBottom'}
      overlayClassName={`erda-global-nav-user-menu ${className}`}
      content={
        <div className="px-2 pb-2 pt-4 min-w-[160px] flex flex-col items-center truncate">
          <Avatar src={avatar} size={48} className="user-avatar">
            {nick}
          </Avatar>
          <div className="mt-2 w-full text-center truncate">{nickOrName}</div>
          <div className="mt-3 w-full self-start">
            {operations?.map(({ onClick, icon, title, danger }, i) => {
              return (
                <div
                  key={i}
                  onClick={onClick}
                  className={`h-8 px-2 flex items-center cursor-pointer rounded-sm text-default-9 ${
                    danger ? 'hover:text-danger hover:bg-red-1' : 'hover:text-default hover:bg-default-1'
                  }`}
                >
                  {icon}
                  {title}
                </div>
              );
            })}
          </div>
        </div>
      }
    >
      <Avatar className="cursor-pointer" src={avatar} size={size || 28}>
        {nick}
      </Avatar>
    </Popover>
  );
}