diff --git a/packages/design/src/empty/colored.tsx b/packages/design/src/empty/colored.tsx new file mode 100644 index 000000000..5b2cdd924 --- /dev/null +++ b/packages/design/src/empty/colored.tsx @@ -0,0 +1,312 @@ +import React from 'react'; + +const ColoredEmptyImg: React.FC = props => ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +); + +if (process.env.NODE_ENV !== 'production') { + ColoredEmptyImg.displayName = 'ColoredEmptyImg'; +} + +export default ColoredEmptyImg; diff --git a/packages/design/src/empty/simple.tsx b/packages/design/src/empty/default.tsx similarity index 93% rename from packages/design/src/empty/simple.tsx rename to packages/design/src/empty/default.tsx index cda77d8c1..a54a1b5fa 100644 --- a/packages/design/src/empty/simple.tsx +++ b/packages/design/src/empty/default.tsx @@ -1,6 +1,6 @@ import React from 'react'; -const Empty: React.FC = props => ( +const DefaultEmptyImg: React.FC = props => ( ( ); if (process.env.NODE_ENV !== 'production') { - Empty.displayName = 'SimpleImage'; + DefaultEmptyImg.displayName = 'DefaultEmptyImg'; } -export default Empty; +export default DefaultEmptyImg; diff --git a/packages/design/src/empty/demo/complete-debug.tsx b/packages/design/src/empty/demo/complete-debug.tsx new file mode 100644 index 000000000..d51695c32 --- /dev/null +++ b/packages/design/src/empty/demo/complete-debug.tsx @@ -0,0 +1,54 @@ +import React, { useState } from 'react'; +import { Button, Empty, Form, Switch } from '@oceanbase/design'; + +export default () => { + const [title, setTitle] = useState(true); + const [description, setDescription] = useState(true); + const [children, setChildren] = useState(true); + + return ( + <> +
+ + { + setTitle(value); + }} + /> + + + { + setDescription(value); + }} + /> + + + { + setChildren(value); + }} + /> + +
+ + {children && } + + + ); +}; diff --git a/packages/design/src/empty/demo/complete.tsx b/packages/design/src/empty/demo/complete.tsx index 4c61ededc..6bc4dc9fa 100644 --- a/packages/design/src/empty/demo/complete.tsx +++ b/packages/design/src/empty/demo/complete.tsx @@ -3,7 +3,11 @@ import { Button, Empty } from '@oceanbase/design'; export default () => { return ( - + ); diff --git a/packages/design/src/empty/demo/horizontal.tsx b/packages/design/src/empty/demo/horizontal.tsx index 8ce6ed473..89a8fbead 100644 --- a/packages/design/src/empty/demo/horizontal.tsx +++ b/packages/design/src/empty/demo/horizontal.tsx @@ -5,7 +5,7 @@ export default () => { return ( diff --git a/packages/design/src/empty/demo/image.tsx b/packages/design/src/empty/demo/image.tsx index ff18b4354..411017dc7 100644 --- a/packages/design/src/empty/demo/image.tsx +++ b/packages/design/src/empty/demo/image.tsx @@ -4,7 +4,7 @@ import { Button, Empty } from '@oceanbase/design'; export default () => { return ( diff --git a/packages/design/src/empty/demo/steps.tsx b/packages/design/src/empty/demo/steps.tsx index 31e17e014..85ffa891f 100644 --- a/packages/design/src/empty/demo/steps.tsx +++ b/packages/design/src/empty/demo/steps.tsx @@ -23,7 +23,12 @@ export default () => { ]; return ( - + ); diff --git a/packages/design/src/empty/demo/with-page-container.tsx b/packages/design/src/empty/demo/with-page-container.tsx index c7a6929b0..b157779f1 100644 --- a/packages/design/src/empty/demo/with-page-container.tsx +++ b/packages/design/src/empty/demo/with-page-container.tsx @@ -20,6 +20,7 @@ export default () => { }} > diff --git a/packages/design/src/empty/empty.tsx b/packages/design/src/empty/empty.tsx deleted file mode 100644 index 812eae4f3..000000000 --- a/packages/design/src/empty/empty.tsx +++ /dev/null @@ -1,153 +0,0 @@ -import React from 'react'; - -const Empty: React.FC = props => ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -); - -if (process.env.NODE_ENV !== 'production') { - Empty.displayName = 'EmptyImage'; -} - -export default Empty; diff --git a/packages/design/src/empty/index.md b/packages/design/src/empty/index.md index 0e381a9d2..4700a610f 100644 --- a/packages/design/src/empty/index.md +++ b/packages/design/src/empty/index.md @@ -13,11 +13,11 @@ nav: ## 代码演示 - + - + - + diff --git a/packages/design/src/empty/index.tsx b/packages/design/src/empty/index.tsx index 453fd2d34..747a7d5bf 100644 --- a/packages/design/src/empty/index.tsx +++ b/packages/design/src/empty/index.tsx @@ -4,14 +4,18 @@ import type { EmptyProps as AntEmptyProps } from 'antd/es/empty'; import type { StepProps } from 'antd/es/steps'; import classNames from 'classnames'; import ConfigProvider from '../config-provider'; -import DefaultEmptyImg from './empty'; -import SimpleEmptyImg from './simple'; +import { useLocale } from '../locale'; +import DefaultEmptyImg from './default'; +import ColoredEmptyImg from './colored'; import useStyle from './style'; export * from 'antd/es/empty'; const defaultEmptyImg = ; -const simpleEmptyImg = ; +// simple empty image is same as default empty image +// To be compatible with antd API +const simpleEmptyImg = ; +const coloredEmptyImg = ; export interface EmptyProps extends AntEmptyProps { title?: React.ReactNode; @@ -22,20 +26,23 @@ export interface EmptyProps extends AntEmptyProps { type CompoundedComponent = React.FC & { PRESENTED_IMAGE_DEFAULT: React.ReactNode; PRESENTED_IMAGE_SIMPLE: React.ReactNode; + PRESENTED_IMAGE_COLORED: React.ReactNode; }; -const Empty: CompoundedComponent = ({ - image = defaultEmptyImg, - title, - description, - steps, - layout = 'vertical', - children, - prefixCls: customizePrefixCls, - className, - style, - ...restProps -}) => { +const Empty: CompoundedComponent = props => { + const [locale] = useLocale('Empty'); + const { + image = defaultEmptyImg, + title, + description = locale.description, + steps, + layout = 'vertical', + children, + prefixCls: customizePrefixCls, + className, + style, + ...restProps + } = props; const { getPrefixCls } = useContext(ConfigProvider.ConfigContext); const prefixCls = getPrefixCls('empty', customizePrefixCls); const { wrapSSR } = useStyle(prefixCls); @@ -43,8 +50,8 @@ const Empty: CompoundedComponent = ({ const emptyCls = classNames( prefixCls, { - [`${prefixCls}-normal`]: image === simpleEmptyImg, [`${prefixCls}-horizontal`]: isHorizontal, + [`${prefixCls}-small`]: image === defaultEmptyImg || image === simpleEmptyImg, }, className ); @@ -53,21 +60,19 @@ const Empty: CompoundedComponent = ({ - {title &&
{title}
} - {description && ( -
- {description} -
- )} - {steps && } - {isHorizontal && children &&
{children}
} - - ) : undefined + <> + {title &&
{title}
} + {description && ( +
+ {description} +
+ )} + {steps && } + {isHorizontal && children &&
{children}
} + } prefixCls={customizePrefixCls} className={emptyCls} @@ -80,6 +85,7 @@ const Empty: CompoundedComponent = ({ Empty.PRESENTED_IMAGE_DEFAULT = defaultEmptyImg; Empty.PRESENTED_IMAGE_SIMPLE = simpleEmptyImg; +Empty.PRESENTED_IMAGE_COLORED = coloredEmptyImg; if (process.env.NODE_ENV !== 'production') { Empty.displayName = AntEmpty.displayName; diff --git a/packages/design/src/empty/style/index.ts b/packages/design/src/empty/style/index.ts index 1fa824eb7..8a0b3e0a6 100644 --- a/packages/design/src/empty/style/index.ts +++ b/packages/design/src/empty/style/index.ts @@ -18,15 +18,22 @@ export const genEmptyStyle: GenerateStyle = (token: EmptyToken): CSS return { [`${componentCls}`]: { [`${componentCls}-image`]: { - height: 'auto', + height: 160, + marginBottom: 0, }, [`${componentCls}-description`]: { + // ensure description content color is correct always + color: colorTextTertiary, [`${componentCls}-title`]: { + color: token.colorText, fontWeight: token.fontWeightStrong, fontSize: token.fontSizeHeading3, + lineHeight: token.lineHeightHeading3, + marginTop: token.marginLG, }, [`${componentCls}-description-content`]: { color: colorTextTertiary, + marginTop: token.marginXS, }, }, [`${componentCls}-footer`]: { @@ -74,7 +81,7 @@ export const genEmptyStyle: GenerateStyle = (token: EmptyToken): CSS justifyContent: 'center', alignItems: 'center', [`${componentCls}-image`]: { - marginBottom: 0, + height: 112, }, [`${componentCls}-description`]: { marginLeft: token.marginXXL, @@ -87,6 +94,12 @@ export const genEmptyStyle: GenerateStyle = (token: EmptyToken): CSS }, }, }, + + [`${componentCls}-small`]: { + [`${componentCls}-image`]: { + height: 54, + }, + }, }; }; diff --git a/packages/design/src/locale/index.ts b/packages/design/src/locale/index.ts index 9b76a032c..b77f2fca1 100644 --- a/packages/design/src/locale/index.ts +++ b/packages/design/src/locale/index.ts @@ -8,3 +8,5 @@ export interface Locale extends AntLocale { Table?: TableLocale; Drawer?: DrawerLocale; } + +export { default as useLocale } from './useLocale'; diff --git a/packages/design/src/locale/useLocale.ts b/packages/design/src/locale/useLocale.ts new file mode 100644 index 000000000..f09497a94 --- /dev/null +++ b/packages/design/src/locale/useLocale.ts @@ -0,0 +1,3 @@ +import { useLocale } from 'antd/es/locale'; + +export default useLocale;