Jayden/AFFiNE-Mirror
0
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-09-06 08:50:50 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore: update confirm ui component

Browse Source
This commit is contained in:
JimmFly
2023-01-18 15:54:56 +08:00
parent 4401f083f2
commit 69b396b9d4
2 changed files with 76 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/app/src/ui/confirm/Confirm.tsx
+61 -26
View File
@@ -1,7 +1,8 @@
import { useState } from 'react'; import { useState } from 'react';
import { Modal, ModalCloseButton, ModalProps } from '../modal'; import { Modal, ModalCloseButton, ModalProps } from '../modal';
import { import {
StyledButtonWrapper, StyledRowButtonWrapper,
StyledColumnButtonWrapper,
StyledConfirmContent, StyledConfirmContent,
StyledConfirmTitle, StyledConfirmTitle,
StyledModalWrapper, StyledModalWrapper,
@@ -15,6 +16,7 @@ export type ConfirmProps = {
cancelText?: string; cancelText?: string;
// TODO: Confirm button's color should depend on confirm type // TODO: Confirm button's color should depend on confirm type
confirmType?: 'primary' | 'warning' | 'danger'; confirmType?: 'primary' | 'warning' | 'danger';
buttonDirection?: 'row' | 'column';
onConfirm?: () => void; onConfirm?: () => void;
onCancel?: () => void; onCancel?: () => void;
} & Omit<ModalProps, 'open' | 'children'>; } & Omit<ModalProps, 'open' | 'children'>;
@@ -26,6 +28,7 @@ export const Confirm = ({
confirmType, confirmType,
onConfirm, onConfirm,
onCancel, onCancel,
buttonDirection = 'row',
cancelText = 'Cancel', cancelText = 'Cancel',
}: ConfirmProps) => { }: ConfirmProps) => {
const [open, setOpen] = useState(true); const [open, setOpen] = useState(true);
@@ -41,31 +44,63 @@ export const Confirm = ({
/> />
<StyledConfirmTitle>{title}</StyledConfirmTitle> <StyledConfirmTitle>{title}</StyledConfirmTitle>
<StyledConfirmContent>{content}</StyledConfirmContent> <StyledConfirmContent>{content}</StyledConfirmContent>
{buttonDirection === 'row' ? (
<StyledButtonWrapper> <StyledRowButtonWrapper>
<Button <Button
shape="round" shape="round"
bold={true} bold={true}
onClick={() => { onClick={() => {
setOpen(false); setOpen(false);
onCancel?.(); onCancel?.();
}} }}
style={{ marginRight: '24px' }} style={{ marginRight: '24px' }}
> >
{cancelText === 'Cancel' ? t('Cancel') : cancelText} {cancelText === 'Cancel' ? t('Cancel') : cancelText}
</Button> </Button>
<Button <Button
type={confirmType} type={confirmType}
shape="round" shape="round"
bold={true} bold={true}
onClick={() => { onClick={() => {
setOpen(false); setOpen(false);
onConfirm?.(); onConfirm?.();
}} }}
> >
{confirmText} {confirmText}
</Button> </Button>
</StyledButtonWrapper> </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> </StyledModalWrapper>
</Modal> </Modal>
); );
packages/app/src/ui/confirm/styles.ts
+15 -3
View File
@@ -3,8 +3,10 @@ import { ModalWrapper } from '@/ui/modal';
export const StyledModalWrapper = styled(ModalWrapper)(() => { export const StyledModalWrapper = styled(ModalWrapper)(() => {
return { return {
width: '460px', minWidth: '460px',
padding: '46px 60px 32px', maxWidth: '560px',
maxHeight: '292px',
padding: '44px 84px 32px 84px',
}; };
}); });
@@ -14,6 +16,7 @@ export const StyledConfirmTitle = styled.div(({ theme }) => {
fontWeight: 600, fontWeight: 600,
textAlign: 'center', textAlign: 'center',
color: theme.colors.popoverColor, color: theme.colors.popoverColor,
lineHeight: '28px',
}; };
}); });
@@ -23,12 +26,21 @@ export const StyledConfirmContent = styled.div(({ theme }) => {
textAlign: 'center', textAlign: 'center',
marginTop: '12px', marginTop: '12px',
color: theme.colors.textColor, color: theme.colors.textColor,
lineHeight: '26px',
}; };
}); });
export const StyledButtonWrapper = styled.div(() => { export const StyledColumnButtonWrapper = styled.div(() => {
return { return {
...displayFlex('center', 'center'), ...displayFlex('center', 'center'),
flexDirection: 'column',
marginTop: '32px',
};
});
export const StyledRowButtonWrapper = styled.div(() => {
return {
...displayFlex('center', 'center'),
flexDirection: 'row',
marginTop: '32px', marginTop: '32px',
}; };
}); });