refactor: move component into a single package (#898)

packages/component/src/ui/confirm/Confirm.tsx

@@ -0,0 +1,109 @@
+import { useState } from 'react';
+import { Modal, ModalCloseButton, ModalProps } from '../modal';
+import {
+  StyledRowButtonWrapper,
+  StyledColumnButtonWrapper,
+  StyledConfirmContent,
+  StyledConfirmTitle,
+  StyledModalWrapper,
+} from './styles';
+import { Button } from '../button';
+import { useTranslation } from '@affine/i18n';
+export type ConfirmProps = {
+  title?: string;
+  content?: string;
+  confirmText?: string;
+  cancelText?: string;
+  // TODO: Confirm button's color should depend on confirm type
+  confirmType?: 'primary' | 'warning' | 'danger';
+  buttonDirection?: 'row' | 'column';
+  onConfirm?: () => void;
+  onCancel?: () => void;
+} & Omit<ModalProps, 'open' | 'children'>;
+
+export const Confirm = ({
+  title,
+  content,
+  confirmText,
+  confirmType,
+  onConfirm,
+  onCancel,
+  buttonDirection = 'row',
+  cancelText = 'Cancel',
+}: ConfirmProps) => {
+  const [open, setOpen] = useState(true);
+  const { t } = useTranslation();
+  return (
+    <Modal open={open}>
+      <StyledModalWrapper>
+        <ModalCloseButton
+          onClick={() => {
+            setOpen(false);
+            onCancel?.();
+          }}
+        />
+        <StyledConfirmTitle>{title}</StyledConfirmTitle>
+        <StyledConfirmContent>{content}</StyledConfirmContent>
+        {buttonDirection === 'row' ? (
+          <StyledRowButtonWrapper>
+            <Button
+              shape="round"
+              bold={true}
+              onClick={() => {
+                setOpen(false);
+                onCancel?.();
+              }}
+              style={{ marginRight: '24px' }}
+            >
+              {cancelText === 'Cancel' ? t('Cancel') : cancelText}
+            </Button>
+            <Button
+              type={confirmType}
+              shape="round"
+              bold={true}
+              onClick={() => {
+                setOpen(false);
+                onConfirm?.();
+              }}
+            >
+              {confirmText}
+            </Button>
+          </StyledRowButtonWrapper>
+        ) : (
+          <StyledColumnButtonWrapper>
+            <Button
+              type={confirmType}
+              shape="round"
+              bold={true}
+              onClick={() => {
+                setOpen(false);
+                onConfirm?.();
+              }}
+              style={{ width: '284px', height: '38px', textAlign: 'center' }}
+            >
+              {confirmText}
+            </Button>
+            <Button
+              shape="round"
+              bold={true}
+              onClick={() => {
+                setOpen(false);
+                onCancel?.();
+              }}
+              style={{
+                marginTop: '16px',
+                width: '284px',
+                height: '38px',
+                textAlign: 'center',
+              }}
+            >
+              {cancelText === 'Cancel' ? t('Cancel') : cancelText}
+            </Button>
+          </StyledColumnButtonWrapper>
+        )}
+      </StyledModalWrapper>
+    </Modal>
+  );
+};
+
+export default Confirm;

packages/component/src/ui/confirm/index.ts

@@ -0,0 +1 @@
+export * from './Confirm';

packages/component/src/ui/confirm/styles.ts

@@ -0,0 +1,46 @@
+import { displayFlex, styled } from '../../styles';
+import { ModalWrapper } from '../modal';
+
+export const StyledModalWrapper = styled(ModalWrapper)(() => {
+  return {
+    minWidth: '460px',
+    maxWidth: '560px',
+    maxHeight: '292px',
+    padding: '44px 84px 32px 84px',
+  };
+});
+
+export const StyledConfirmTitle = styled.div(({ theme }) => {
+  return {
+    fontSize: theme.font.h6,
+    fontWeight: 600,
+    textAlign: 'center',
+    color: theme.colors.popoverColor,
+    lineHeight: '28px',
+  };
+});
+
+export const StyledConfirmContent = styled.div(({ theme }) => {
+  return {
+    fontSize: theme.font.base,
+    textAlign: 'center',
+    marginTop: '12px',
+    color: theme.colors.textColor,
+    lineHeight: '26px',
+  };
+});
+
+export const StyledColumnButtonWrapper = styled.div(() => {
+  return {
+    ...displayFlex('center', 'center'),
+    flexDirection: 'column',
+    marginTop: '32px',
+  };
+});
+export const StyledRowButtonWrapper = styled.div(() => {
+  return {
+    ...displayFlex('center', 'center'),
+    flexDirection: 'row',
+    marginTop: '32px',
+  };
+});