From 7c21f47d8d0c0d5866498b99addb80d8e5882e24 Mon Sep 17 00:00:00 2001 From: canisminor1990 Date: Fri, 17 Nov 2023 22:44:32 +0800 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat:=20Add=20exrta=20to=20Alert?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Alert/demos/Extra.tsx | 28 ++++++++ src/Alert/index.md | 4 ++ src/Alert/index.tsx | 91 +++++++++++++++++++++--- src/Alert/style.ts | 47 ++++++++++-- src/ChatItem/components/ErrorContent.tsx | 5 +- src/ChatItem/demos/Alert.tsx | 33 ++++++++- src/ChatItem/style.ts | 20 ++++-- src/styles/theme/customStylish.ts | 30 +++++--- 8 files changed, 220 insertions(+), 38 deletions(-) create mode 100644 src/Alert/demos/Extra.tsx diff --git a/src/Alert/demos/Extra.tsx b/src/Alert/demos/Extra.tsx new file mode 100644 index 00000000..13d987f2 --- /dev/null +++ b/src/Alert/demos/Extra.tsx @@ -0,0 +1,28 @@ +import { Alert, Highlighter } from '@lobehub/ui'; + +const demoError = { + details: { + exception: 'Validation filter failed', + msgId: 'Id-f5aab7304f6c754804f70000', + }, + reasons: [ + { + language: 'en', + message: 'Validation filter failed', + }, + ], +}; +export default () => { + return ( + + {JSON.stringify(demoError, null, 2)} + + } + message={'Quest error'} + showIcon + type={'error'} + /> + ); +}; diff --git a/src/Alert/index.md b/src/Alert/index.md index 9dd0d6e8..e0a4b7c4 100644 --- a/src/Alert/index.md +++ b/src/Alert/index.md @@ -8,6 +8,10 @@ title: Alert +## Extra + + + ## APIs diff --git a/src/Alert/index.tsx b/src/Alert/index.tsx index c9c65a1b..ad0e3ed0 100644 --- a/src/Alert/index.tsx +++ b/src/Alert/index.tsx @@ -1,7 +1,16 @@ -import { type AlertProps as AntAlertProps, Alert as AntdAlert } from 'antd'; +import { type AlertProps as AntAlertProps, Alert as AntdAlert, message } from 'antd'; import { camelCase } from 'lodash-es'; -import { AlertTriangle, CheckCircle, Info, X, XCircle } from 'lucide-react'; -import { memo } from 'react'; +import { + AlertTriangle, + CheckCircle, + ChevronDown, + ChevronRight, + Info, + X, + XCircle, +} from 'lucide-react'; +import { type ReactNode, memo, useState } from 'react'; +import { Flexbox } from 'react-layout-kit'; import ActionIcon from '@/ActionIcon'; import Icon from '@/Icon'; @@ -9,8 +18,16 @@ import Icon from '@/Icon'; import { useStyles } from './style'; export interface AlertProps extends AntAlertProps { + classNames?: { + alert?: string; + container?: string; + }; colorfulText?: boolean; - styleType?: 'block' | 'ghost' | 'pure'; + extra?: ReactNode; + text?: { + detail?: string; + }; + variant?: 'default' | 'block' | 'ghost' | 'pure'; } const typeIcons = { @@ -26,30 +43,37 @@ const colors = (theme: any, type: string = 'info', ...keys: string[]) => const Alert = memo( ({ closeIcon, - closable, + closable = false, description, - showIcon, + showIcon = true, type = 'info', - styleType, + variant, icon, colorfulText = true, style, + extra, + classNames, + text, ...rest }) => { + const [expand, setExpand] = useState(true); const { theme, styles, cx } = useStyles({ closable: !!closable, hasTitle: !!description, showIcon: !!showIcon, }); - return ( + const alert = ( } @@ -61,6 +85,51 @@ const Alert = memo( {...rest} /> ); + + if (!extra) return alert; + + return ( + + {alert} + + + setExpand(!expand)} + size={{ blockSize: 24, fontSize: 18 }} + /> +
{text?.detail || 'Show Details'}
+ + {expand && ( +
+ {extra} +
+ )} + + + ); }, ); diff --git a/src/Alert/style.ts b/src/Alert/style.ts index a3e9469a..36c07093 100644 --- a/src/Alert/style.ts +++ b/src/Alert/style.ts @@ -2,7 +2,7 @@ import { createStyles } from 'antd-style'; export const useStyles = createStyles( ( - { cx, css, prefixCls }, + { cx, token, css, prefixCls }, { closable, hasTitle, @@ -19,11 +19,14 @@ export const useStyles = createStyles( `, container: cx( css` + position: relative; + display: flex; flex-direction: row; gap: ${hasTitle ? 12 : 8}px; align-items: flex-start; + max-width: 100%; padding-right: ${closable ? baseInlinePadding : baseInlinePadding * 1.5}px; padding-left: ${showIcon ? baseInlinePadding : baseInlinePadding * 1.5}px; padding-block: ${baseBlockPadding}px; @@ -55,17 +58,49 @@ export const useStyles = createStyles( } `, ), - styleBlock: css` + extra: css` + position: relative; + + overflow: hidden; + + max-width: 100%; + + border: 1px solid; + border-top: none; + border-bottom-right-radius: ${token.borderRadiusLG}px; + border-bottom-left-radius: ${token.borderRadiusLG}px; + `, + extraBody: css` + overflow-x: auto; + width: 100%; + padding-block: ${baseBlockPadding}px; + padding-inline: ${baseInlinePadding}px; + `, + extraHeader: css` + padding-block: ${baseBlockPadding * 0.75}px; + padding-inline: ${baseInlinePadding * 0.75}px; + border-top: 1px dashed; + `, + hasExtra: css` + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; + `, + variantBlock: css` border: none; `, - styleGhost: css` - background: transparent; + variantGhost: css` + background: transparent !important; `, - stylePure: css` + variantPure: css` padding: 0 !important; - background: transparent; + background: transparent !important; border: none; `, + variantPureExtraHeader: css` + margin-top: ${baseBlockPadding}px; + margin-left: ${-baseInlinePadding * 0.25}px; + padding-inline: 0; + `, }; }, ); diff --git a/src/ChatItem/components/ErrorContent.tsx b/src/ChatItem/components/ErrorContent.tsx index df61f6b8..43e1c9a5 100644 --- a/src/ChatItem/components/ErrorContent.tsx +++ b/src/ChatItem/components/ErrorContent.tsx @@ -16,9 +16,8 @@ const ErrorContent = memo(({ message, error, placement }) => const { styles } = useStyles({ placement }); return ( - - - {message} + + ); }); diff --git a/src/ChatItem/demos/Alert.tsx b/src/ChatItem/demos/Alert.tsx index 8645f752..f4b28a56 100644 --- a/src/ChatItem/demos/Alert.tsx +++ b/src/ChatItem/demos/Alert.tsx @@ -1,7 +1,28 @@ -import { ChatItem, ChatItemProps, StoryBook, useControls, useCreateStore } from '@lobehub/ui'; +import { + ChatItem, + ChatItemProps, + Highlighter, + StoryBook, + useControls, + useCreateStore, +} from '@lobehub/ui'; import { avatar } from './data'; +const demoError = { + details: { + exception: + 'Validation filter failedId-f5aab7304f6c754804f70000Id-f5aab7304f6c754804f70000Id-f5aab7304f6c754804f70000Id-f5aab7304f6c754804f70000Id-f5aab7304f6c754804f70000Id-f5aab7304f6c754804f70000', + msgId: + 'Id-f5aab7304f6c754804f70000Id-f5aab7304f6c754804f70000Id-f5aab7304f6c754804f70000Id-f5aab7304f6c754804f70000Id-f5aab7304f6c754804f70000', + }, + reasons: [ + { + language: 'en', + message: 'Validation filter failed', + }, + ], +}; export default () => { const store = useCreateStore(); const control: ChatItemProps['error'] | any = useControls( @@ -18,7 +39,15 @@ export default () => { return ( - + + {JSON.stringify(demoError, null, 2)} + + } + /> ); }; diff --git a/src/ChatItem/style.ts b/src/ChatItem/style.ts index e511335e..1136ddbb 100644 --- a/src/ChatItem/style.ts +++ b/src/ChatItem/style.ts @@ -54,6 +54,7 @@ export const useStyles = createStyles( return { actions: cx( css` + flex: none; align-self: ${type === 'block' ? 'flex-end' : placement === 'left' @@ -80,9 +81,12 @@ export const useStyles = createStyles( type === 'pure' && pureContainerStylish, css` position: relative; + + overflow: hidden; + width: 100%; max-width: 100vw; - padding: 12px 16px; + padding: 16px; time { display: inline-block; @@ -133,11 +137,12 @@ export const useStyles = createStyles( editingInput: css` width: 100%; `, - errorContent: css` - ${responsive.mobile} { - width: 100%; - } + errorContainer: css` + position: relative; + overflow: hidden; + width: 100%; `, + loading: css` position: absolute; right: ${placement === 'left' ? '-4px' : 'unset'}; @@ -162,10 +167,11 @@ export const useStyles = createStyles( editingStylish, css` position: relative; + overflow: hidden; + max-width: 100%; ${responsive.mobile} { overflow-x: auto; - max-width: 100%; } `, ), @@ -174,10 +180,10 @@ export const useStyles = createStyles( css` position: relative; overflow-x: hidden; + max-width: 100%; ${responsive.mobile} { flex-direction: column !important; - width: 100%; } `, ), diff --git a/src/styles/theme/customStylish.ts b/src/styles/theme/customStylish.ts index 1f8dccd1..9f8807b8 100644 --- a/src/styles/theme/customStylish.ts +++ b/src/styles/theme/customStylish.ts @@ -75,18 +75,18 @@ export const generateCustomStylish: GetCustomStylish = ({ margin-block: 0 0; font-size: 14px; - line-height: 1.8; + line-height: 2; color: ${token.colorText}; word-break: break-all; word-wrap: break-word; + * { - margin-block-end: 0.5em; + margin-block-end: 1em; } - } - > *:last-child { - margin-bottom: 0 !important; + &:not(:last-child) { + margin-bottom: 1.5em; + } } blockquote { @@ -99,10 +99,6 @@ export const generateCustomStylish: GetCustomStylish = ({ } } - p:not(:last-child) { - margin-bottom: 1em; - } - a { color: ${token.colorLink}; @@ -249,6 +245,22 @@ export const generateCustomStylish: GetCustomStylish = ({ margin-block-start: 0; font-size: 1em; } + + > *:last-child { + margin-bottom: 0 !important; + } + + p { + line-height: 1.8; + + + * { + margin-block-end: 0.5em; + } + + &:not(:last-child) { + margin-bottom: 1em; + } + } `, noScrollbar: css` ::-webkit-scrollbar {