diff --git a/components/config-provider/empty.svg b/components/config-provider/empty.svg new file mode 100644 index 000000000..55e40af09 --- /dev/null +++ b/components/config-provider/empty.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/components/config-provider/index.jsx b/components/config-provider/index.jsx index 44551a6df..c05b7b7f9 100644 --- a/components/config-provider/index.jsx +++ b/components/config-provider/index.jsx @@ -1,17 +1,41 @@ import PropTypes from '../_util/vue-types'; +import { filterEmpty } from '../_util/props-util'; +import defaultRenderEmpty from './renderEmpty'; const ConfigProvider = { name: 'AConfigProvider', props: { getPopupContainer: PropTypes.func, + prefixCls: PropTypes.string, + renderEmpty: PropTypes.any, + csp: PropTypes.any, + autoInsertSpaceInButton: PropTypes.bool, }, provide() { return { - configProvider: this.$props, + configProvider: { + ...this.$props, + renderEmpty: this.$props.renderEmpty || this.$slots.renderEmpty || defaultRenderEmpty, + getPrefixCls: this.getPrefixCls, + }, }; }, + methods: { + getPrefixCls(suffixCls, customizePrefixCls) { + const { prefixCls = 'ant' } = this.$props; + if (customizePrefixCls) return customizePrefixCls; + return suffixCls ? `${prefixCls}-${suffixCls}` : prefixCls; + }, + }, render() { - return this.$slots.default ? this.$slots.default[0] : null; + return this.$slots.default ? filterEmpty(this.$slots.default) : null; + }, +}; + +export const ConfigConsumerProps = { + getPrefixCls: (suffixCls, customizePrefixCls) => { + if (customizePrefixCls) return customizePrefixCls; + return `ant-${suffixCls}`; }, }; diff --git a/components/config-provider/renderEmpty.jsx b/components/config-provider/renderEmpty.jsx new file mode 100644 index 000000000..8d124d20f --- /dev/null +++ b/components/config-provider/renderEmpty.jsx @@ -0,0 +1,34 @@ +import PropTypes from '../_util/vue-types'; +import Empty from '../empty'; +import emptyImg from './empty.svg'; + +const renderEmpty = { + functional: true, + inject: ['configProvider'], + props: { + componentName: PropTypes.string, + }, + render(createElement, context) { + const { props, injections } = context; + function renderHtml(componentName) { + const prefix = injections.configProvider.getPrefixCls('empty'); + switch (componentName) { + case 'Table': + case 'List': + return ; + + case 'Select': + case 'TreeSelect': + case 'Cascader': + case 'Transfer': + return ; + + default: + return ; + } + } + return renderHtml(props.componentName); + }, +}; + +export default renderEmpty; diff --git a/components/empty/demo/config-provider.md b/components/empty/demo/config-provider.md new file mode 100644 index 000000000..856e842a1 --- /dev/null +++ b/components/empty/demo/config-provider.md @@ -0,0 +1,84 @@ + +#### 全局化配置 +自定义全局组件的 Empty 样式。 + + + +#### ConfigProvider +Use ConfigProvider set global Empty style. + + +```html + + + +``` + + diff --git a/components/empty/demo/customize.md b/components/empty/demo/customize.md new file mode 100644 index 000000000..7e94955ca --- /dev/null +++ b/components/empty/demo/customize.md @@ -0,0 +1,22 @@ + +#### 自定义 +自定义图片、描述、附属内容。 + + + +#### Customize +Customize image, description and extra content. + + +```html + +``` diff --git a/components/empty/index.jsx b/components/empty/index.jsx index 2649db7a8..aca4831db 100644 --- a/components/empty/index.jsx +++ b/components/empty/index.jsx @@ -1,5 +1,5 @@ import PropTypes from '../_util/vue-types'; -import { ConfigConsumer, ConfigConsumerProps } from '../config-provider'; +import { ConfigConsumerProps } from '../config-provider'; import { getComponentFromProp } from '../_util/props-util'; import LocaleReceiver from '../locale-provider/LocaleReceiver'; import emptyImg from './empty.svg'; @@ -29,10 +29,7 @@ const Empty = { prefixCls: customizePrefixCls, ...restProps } = this.$props; - - // todo - // const prefixCls = getPrefixCls('empty', customizePrefixCls); - const prefixCls = customizePrefixCls || 'ant-empty'; + const prefixCls = ConfigConsumerProps.getPrefixCls('empty', customizePrefixCls); const image = getComponentFromProp(this, 'image'); const description = getComponentFromProp(this, 'description'); @@ -54,7 +51,7 @@ const Empty = {

{des}

- {this.$slots.default &&
{this.$slots.default[0]}
} + {this.$slots.default &&
{this.$slots.default}
} ); }, diff --git a/components/vc-cascader/Cascader.jsx b/components/vc-cascader/Cascader.jsx index 456f6c76b..a3510ebfa 100644 --- a/components/vc-cascader/Cascader.jsx +++ b/components/vc-cascader/Cascader.jsx @@ -372,7 +372,7 @@ export default { return ( {children && - cloneElement(children[0], { + cloneElement(children, { on: { keydown: handleKeyDown, }, diff --git a/components/vc-select/Select.jsx b/components/vc-select/Select.jsx index 3165d01cd..f4663523b 100644 --- a/components/vc-select/Select.jsx +++ b/components/vc-select/Select.jsx @@ -1488,7 +1488,6 @@ const Select = { }, render() { - console.log('12'); const props = this.$props; const multiple = isMultipleOrTags(props); // Default set showArrow to true if not set (not set directly in defaultProps to handle multiple case)