|
1 | | -import type { CSSProperties, FunctionalComponent, PropType } from 'vue'; |
| 1 | +import { defineComponent } from 'vue'; |
| 2 | +import type { CSSProperties, PropType, ExtractPropTypes } from 'vue'; |
2 | 3 | import classNames from '../_util/classNames'; |
3 | 4 | import LocaleReceiver from '../locale-provider/LocaleReceiver'; |
4 | 5 | import DefaultEmptyImg from './empty'; |
5 | 6 | import SimpleEmptyImg from './simple'; |
6 | 7 | import { filterEmpty } from '../_util/props-util'; |
7 | 8 | import PropTypes from '../_util/vue-types'; |
8 | | -import type { VueNode } from '../_util/type'; |
9 | 9 | import { withInstall } from '../_util/type'; |
10 | 10 | import useConfigInject from '../config-provider/hooks/useConfigInject'; |
11 | 11 |
|
| 12 | +import useStyle from './style'; |
| 13 | + |
12 | 14 | const defaultEmptyImg = <DefaultEmptyImg />; |
13 | 15 | const simpleEmptyImg = <SimpleEmptyImg />; |
14 | 16 |
|
15 | 17 | interface Locale { |
16 | 18 | description?: string; |
17 | 19 | } |
18 | 20 |
|
19 | | -export interface EmptyProps { |
20 | | - prefixCls?: string; |
21 | | - class?: any; |
22 | | - style?: string | CSSProperties; |
23 | | - imageStyle?: CSSProperties; |
24 | | - image?: VueNode | null; |
25 | | - description?: VueNode; |
26 | | -} |
| 21 | +export const emptyProps = () => ({ |
| 22 | + prefixCls: String, |
| 23 | + class: PropTypes.any, |
| 24 | + style: [String, Object] as PropType<string | CSSProperties>, |
| 25 | + imageStyle: Object as PropType<CSSProperties>, |
| 26 | + image: PropTypes.any, |
| 27 | + description: PropTypes.any, |
| 28 | +}); |
27 | 29 |
|
28 | | -interface EmptyType extends FunctionalComponent<EmptyProps> { |
29 | | - displayName: string; |
30 | | - PRESENTED_IMAGE_DEFAULT: VueNode; |
31 | | - PRESENTED_IMAGE_SIMPLE: VueNode; |
32 | | -} |
| 30 | +export type EmptyProps = Partial<ExtractPropTypes<ReturnType<typeof emptyProps>>>; |
33 | 31 |
|
34 | | -const Empty: EmptyType = (props, { slots = {}, attrs }) => { |
35 | | - const { direction, prefixCls: prefixClsRef } = useConfigInject('empty', props); |
36 | | - const prefixCls = prefixClsRef.value; |
| 32 | +const Empty = defineComponent({ |
| 33 | + name: 'AEmpty', |
| 34 | + inheritAttrs: false, |
| 35 | + props: emptyProps(), |
| 36 | + setup(props, { slots = {}, attrs }) { |
| 37 | + const { direction, prefixCls: prefixClsRef } = useConfigInject('empty', props); |
37 | 38 |
|
38 | | - const { |
39 | | - image = defaultEmptyImg, |
40 | | - description = slots.description?.() || undefined, |
41 | | - imageStyle, |
42 | | - class: className = '', |
43 | | - ...restProps |
44 | | - } = { ...props, ...attrs }; |
| 39 | + const [wrapSSR, hashId] = useStyle(prefixClsRef); |
45 | 40 |
|
46 | | - return ( |
47 | | - <LocaleReceiver |
48 | | - componentName="Empty" |
49 | | - children={(locale: Locale) => { |
50 | | - const des = typeof description !== 'undefined' ? description : locale.description; |
51 | | - const alt = typeof des === 'string' ? des : 'empty'; |
52 | | - let imageNode: EmptyProps['image'] = null; |
| 41 | + return () => { |
| 42 | + const prefixCls = prefixClsRef.value; |
| 43 | + const { |
| 44 | + image = defaultEmptyImg, |
| 45 | + description = slots.description?.() || undefined, |
| 46 | + imageStyle, |
| 47 | + class: className = '', |
| 48 | + ...restProps |
| 49 | + } = { ...props, ...attrs }; |
53 | 50 |
|
54 | | - if (typeof image === 'string') { |
55 | | - imageNode = <img alt={alt} src={image} />; |
56 | | - } else { |
57 | | - imageNode = image; |
58 | | - } |
| 51 | + return wrapSSR( |
| 52 | + <LocaleReceiver |
| 53 | + componentName="Empty" |
| 54 | + children={(locale: Locale) => { |
| 55 | + const des = typeof description !== 'undefined' ? description : locale.description; |
| 56 | + const alt = typeof des === 'string' ? des : 'empty'; |
| 57 | + let imageNode: EmptyProps['image'] = null; |
59 | 58 |
|
60 | | - return ( |
61 | | - <div |
62 | | - class={classNames(prefixCls, className, { |
63 | | - [`${prefixCls}-normal`]: image === simpleEmptyImg, |
64 | | - [`${prefixCls}-rtl`]: direction.value === 'rtl', |
65 | | - })} |
66 | | - {...restProps} |
67 | | - > |
68 | | - <div class={`${prefixCls}-image`} style={imageStyle}> |
69 | | - {imageNode} |
70 | | - </div> |
71 | | - {des && <p class={`${prefixCls}-description`}>{des}</p>} |
72 | | - {slots.default && ( |
73 | | - <div class={`${prefixCls}-footer`}>{filterEmpty(slots.default())}</div> |
74 | | - )} |
75 | | - </div> |
76 | | - ); |
77 | | - }} |
78 | | - /> |
79 | | - ); |
80 | | -}; |
| 59 | + if (typeof image === 'string') { |
| 60 | + imageNode = <img alt={alt} src={image} />; |
| 61 | + } else { |
| 62 | + imageNode = image; |
| 63 | + } |
81 | 64 |
|
82 | | -Empty.displayName = 'AEmpty'; |
| 65 | + return ( |
| 66 | + <div |
| 67 | + class={classNames(prefixCls, className, hashId.value, { |
| 68 | + [`${prefixCls}-normal`]: image === simpleEmptyImg, |
| 69 | + [`${prefixCls}-rtl`]: direction.value === 'rtl', |
| 70 | + })} |
| 71 | + {...restProps} |
| 72 | + > |
| 73 | + <div class={`${prefixCls}-image`} style={imageStyle}> |
| 74 | + {imageNode} |
| 75 | + </div> |
| 76 | + {des && <p class={`${prefixCls}-description`}>{des}</p>} |
| 77 | + {slots.default && ( |
| 78 | + <div class={`${prefixCls}-footer`}>{filterEmpty(slots.default())}</div> |
| 79 | + )} |
| 80 | + </div> |
| 81 | + ); |
| 82 | + }} |
| 83 | + />, |
| 84 | + ); |
| 85 | + }; |
| 86 | + }, |
| 87 | +}); |
83 | 88 |
|
84 | 89 | Empty.PRESENTED_IMAGE_DEFAULT = defaultEmptyImg; |
85 | 90 | Empty.PRESENTED_IMAGE_SIMPLE = simpleEmptyImg; |
|
0 commit comments