From 43b17e8544a9e615967018073fcc6b876a507926 Mon Sep 17 00:00:00 2001 From: KubeSphere CI Bot <47586280+ks-ci-bot@users.noreply.github.com> Date: Tue, 7 Jan 2025 11:37:24 +0800 Subject: [PATCH] [master] chore: sync codes (#4416) chore: sync codes Signed-off-by: donniean Co-authored-by: donniean --- .../ResetDefaultConfigConfirmModal.tsx | 22 +++++-------- .../Modals/Confirm/ConfirmModal.constants.ts | 21 ++++++++++++ .../Modals/Confirm/ConfirmModal.helpers.tsx | 32 +++++++++++++++++++ .../Modals/Confirm/ConfirmModal.styles.ts} | 5 --- .../Modals/Confirm/ConfirmModal.tsx | 27 ++++++++++++++++ .../Modals/Confirm/ConfirmModal.types.ts | 14 ++++++++ .../src/components/Modals/Confirm/index.ts | 2 ++ packages/shared/src/components/index.ts | 1 + 8 files changed, 105 insertions(+), 19 deletions(-) create mode 100644 packages/shared/src/components/Modals/Confirm/ConfirmModal.constants.ts create mode 100644 packages/shared/src/components/Modals/Confirm/ConfirmModal.helpers.tsx rename packages/{core/src/containers/Extensions/Management/components/ResetDefaultConfigTip/ResetDefaultConfigConfirmModal.styles.ts => shared/src/components/Modals/Confirm/ConfirmModal.styles.ts} (88%) create mode 100644 packages/shared/src/components/Modals/Confirm/ConfirmModal.tsx create mode 100644 packages/shared/src/components/Modals/Confirm/ConfirmModal.types.ts create mode 100644 packages/shared/src/components/Modals/Confirm/index.ts diff --git a/packages/core/src/containers/Extensions/Management/components/ResetDefaultConfigTip/ResetDefaultConfigConfirmModal.tsx b/packages/core/src/containers/Extensions/Management/components/ResetDefaultConfigTip/ResetDefaultConfigConfirmModal.tsx index d4e520663f3..a62060d1366 100644 --- a/packages/core/src/containers/Extensions/Management/components/ResetDefaultConfigTip/ResetDefaultConfigConfirmModal.tsx +++ b/packages/core/src/containers/Extensions/Management/components/ResetDefaultConfigTip/ResetDefaultConfigConfirmModal.tsx @@ -4,13 +4,12 @@ */ import React from 'react'; -import type { ModalProps } from '@kubed/components'; -import { Question } from '@kubed/icons'; -import { StyledModal, Header, Title, Description } from './ResetDefaultConfigConfirmModal.styles'; +import type { ConfirmModalProps } from '@ks-console/shared'; +import { ConfirmModal } from '@ks-console/shared'; type ResetDefaultConfigConfirmModalProps = Pick< - ModalProps, + ConfirmModalProps, 'visible' | 'confirmLoading' | 'onCancel' | 'onOk' >; @@ -21,19 +20,14 @@ export function ResetDefaultConfigConfirmModal({ onOk, }: ResetDefaultConfigConfirmModalProps) { return ( - -
- - {t('RESET_DEFAULT_CONFIGURATION_TITLE')} -
- {t('RESET_DEFAULT_CONFIGURATION_CONFIRM_DESCRIPTION')} - + /> ); } diff --git a/packages/shared/src/components/Modals/Confirm/ConfirmModal.constants.ts b/packages/shared/src/components/Modals/Confirm/ConfirmModal.constants.ts new file mode 100644 index 00000000000..d94e2e4e0e9 --- /dev/null +++ b/packages/shared/src/components/Modals/Confirm/ConfirmModal.constants.ts @@ -0,0 +1,21 @@ +import { Question, Exclamation, Failure } from '@kubed/icons'; + +export const DEFAULT_TITLE_ICON_PROPS = { + size: 20, + color: '#fff', +} as const; + +export const TITLE_ICON_TYPE_MAP = { + info: { + icon: Question, + fillColorName: 'blue', + }, + warning: { + icon: Exclamation, + fillColorName: 'yellow', + }, + error: { + icon: Failure, + fillColorName: 'red', + }, +} as const; diff --git a/packages/shared/src/components/Modals/Confirm/ConfirmModal.helpers.tsx b/packages/shared/src/components/Modals/Confirm/ConfirmModal.helpers.tsx new file mode 100644 index 00000000000..b4fe69c3b0c --- /dev/null +++ b/packages/shared/src/components/Modals/Confirm/ConfirmModal.helpers.tsx @@ -0,0 +1,32 @@ +import React from 'react'; +import { merge } from 'lodash'; +import { useTheme } from '@kubed/components'; + +import type { TitleIconProps, ConfirmModalProps } from './ConfirmModal.types'; +import { DEFAULT_TITLE_ICON_PROPS, TITLE_ICON_TYPE_MAP } from './ConfirmModal.constants'; + +interface TitleIconOptions { + titleIconProps?: TitleIconProps; + titleIcon?: ConfirmModalProps['titleIcon']; +} + +export function renderTitleIcon({ titleIconProps, titleIcon }: TitleIconOptions) { + const { palette } = useTheme(); + + if (titleIcon) { + return titleIcon; + } + + if (!titleIconProps) { + return null; + } + + const { icon: Icon, fillColorName } = TITLE_ICON_TYPE_MAP[titleIconProps.type]; + const defaultProps: Omit = { + ...DEFAULT_TITLE_ICON_PROPS, + fill: palette.colors[fillColorName]?.[2], + }; + const finalProps = merge({}, defaultProps, titleIconProps); + + return ; +} diff --git a/packages/core/src/containers/Extensions/Management/components/ResetDefaultConfigTip/ResetDefaultConfigConfirmModal.styles.ts b/packages/shared/src/components/Modals/Confirm/ConfirmModal.styles.ts similarity index 88% rename from packages/core/src/containers/Extensions/Management/components/ResetDefaultConfigTip/ResetDefaultConfigConfirmModal.styles.ts rename to packages/shared/src/components/Modals/Confirm/ConfirmModal.styles.ts index bb6993c5f12..b09839c87f3 100644 --- a/packages/core/src/containers/Extensions/Management/components/ResetDefaultConfigTip/ResetDefaultConfigConfirmModal.styles.ts +++ b/packages/shared/src/components/Modals/Confirm/ConfirmModal.styles.ts @@ -25,11 +25,6 @@ export const Header = styled.div` display: flex; align-items: center; column-gap: 4px; - - svg.kubed-icon { - color: rgba(255, 255, 255, 0.9); - fill: ${({ theme }) => theme.palette.colors.blue[2]}; - } `; export const Title = styled.h5` diff --git a/packages/shared/src/components/Modals/Confirm/ConfirmModal.tsx b/packages/shared/src/components/Modals/Confirm/ConfirmModal.tsx new file mode 100644 index 00000000000..0ca46f36f3d --- /dev/null +++ b/packages/shared/src/components/Modals/Confirm/ConfirmModal.tsx @@ -0,0 +1,27 @@ +import React from 'react'; + +import type { ConfirmModalProps } from './ConfirmModal.types'; +import { renderTitleIcon } from './ConfirmModal.helpers'; +import { StyledModal, Header, Title, Description } from './ConfirmModal.styles'; + +export function ConfirmModal({ + titleIconProps, + titleIcon, + title, + description, + ...rest +}: ConfirmModalProps) { + const hasHeader = title || titleIcon || titleIconProps; + + return ( + + {hasHeader && ( +
+ {renderTitleIcon({ titleIconProps, titleIcon })} + {title && {title}} +
+ )} + {description && {description}} + + ); +} diff --git a/packages/shared/src/components/Modals/Confirm/ConfirmModal.types.ts b/packages/shared/src/components/Modals/Confirm/ConfirmModal.types.ts new file mode 100644 index 00000000000..1b0b3c12bb1 --- /dev/null +++ b/packages/shared/src/components/Modals/Confirm/ConfirmModal.types.ts @@ -0,0 +1,14 @@ +import type { ReactNode } from 'react'; +import type { ModalProps } from '@kubed/components'; +import type { Props } from '@kubed/icons'; + +export interface TitleIconProps extends Props { + type: 'warning' | 'info' | 'error'; +} + +export interface ConfirmModalProps extends Omit { + titleIconProps?: TitleIconProps; + titleIcon?: ReactNode; + title?: ReactNode; + description?: ReactNode; +} diff --git a/packages/shared/src/components/Modals/Confirm/index.ts b/packages/shared/src/components/Modals/Confirm/index.ts new file mode 100644 index 00000000000..f5fee6c7b10 --- /dev/null +++ b/packages/shared/src/components/Modals/Confirm/index.ts @@ -0,0 +1,2 @@ +export type { ConfirmModalProps } from './ConfirmModal.types'; +export * from './ConfirmModal'; diff --git a/packages/shared/src/components/index.ts b/packages/shared/src/components/index.ts index 761f92eaf2b..5b3558a36b6 100644 --- a/packages/shared/src/components/index.ts +++ b/packages/shared/src/components/index.ts @@ -23,6 +23,7 @@ export { default as Pagination } from './Pagination'; export { default as Avatar } from './Avatar'; export { default as StatusReason } from './StatusReason'; +export * from './Modals/Confirm'; export * from './Modals/EnterLicense'; export * from './Modals/FullScreenModal'; export * from './Modals/KubeCtl';