Concat plugin to app (#1799)

packages/web/components/common/MyPopover/PopoverConfirm.tsx

@@ -0,0 +1,98 @@
+import React, { useMemo } from 'react';
+import MyPopover from './index';
+import { useTranslation } from 'next-i18next';
+import MyIcon from '../Icon';
+import { useRequest2 } from '../../../hooks/useRequest';
+import {
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+  useDisclosure,
+  PlacementWithLogical,
+  HStack,
+  Box,
+  Button,
+  PopoverArrow
+} from '@chakra-ui/react';
+
+const PopoverConfirm = ({
+  content,
+  showCancel,
+  type,
+  Trigger,
+  placement = 'bottom-start',
+  offset,
+  onConfirm
+}: {
+  content: string;
+  showCancel?: boolean;
+  type?: 'info' | 'delete';
+  Trigger: React.ReactNode;
+  placement?: PlacementWithLogical;
+  offset?: [number, number];
+  onConfirm: () => any;
+}) => {
+  const { t } = useTranslation();
+
+  const map = useMemo(() => {
+    const map = {
+      info: {
+        variant: 'primary',
+        icon: 'common/confirm/commonTip'
+      },
+      delete: {
+        variant: 'dangerFill',
+        icon: 'common/confirm/deleteTip'
+      }
+    };
+    if (type && map[type]) return map[type];
+    return map.info;
+  }, [type, t]);
+
+  const firstFieldRef = React.useRef(null);
+  const { onOpen, onClose, isOpen } = useDisclosure();
+
+  const { runAsync: onclickConfirm, loading } = useRequest2(onConfirm, {
+    onSuccess: onClose
+  });
+
+  return (
+    <Popover
+      isOpen={isOpen}
+      initialFocusRef={firstFieldRef}
+      onOpen={onOpen}
+      onClose={onClose}
+      placement={placement}
+      offset={offset}
+      closeOnBlur={false}
+      trigger={'click'}
+      openDelay={100}
+      closeDelay={100}
+      isLazy
+      lazyBehavior="keepMounted"
+      arrowSize={10}
+    >
+      <PopoverTrigger>{Trigger}</PopoverTrigger>
+      <PopoverContent p={4}>
+        <PopoverArrow />
+
+        <HStack alignItems={'flex-start'}>
+          <MyIcon name={map.icon as any} w={'1.5rem'} />
+          <Box fontSize={'sm'}>{content}</Box>
+        </HStack>
+        <HStack mt={1} justifyContent={'flex-end'}>
+          {showCancel && (
+            <Button variant={'whiteBase'} size="sm" onClick={onClose}>
+              {t('common.Cancel')}
+            </Button>
+          )}
+          <Button isLoading={loading} variant={map.variant} size="sm" onClick={onclickConfirm}>
+            {t('common.Confirm')}
+          </Button>
+        </HStack>
+      </PopoverContent>
+    </Popover>
+  );
+};
+
+export default PopoverConfirm;