From 91fe27d12c9704bcb410816be86164e760be05bc Mon Sep 17 00:00:00 2001 From: Amour1688 Date: Sun, 23 Aug 2020 16:45:55 +0800 Subject: [PATCH] chore: update empty and space --- components/_util/props-util.ts | 46 ++++---- components/config-provider/index.tsx | 2 +- components/config-provider/renderEmpty.tsx | 52 +++++---- components/empty/index.tsx | 125 ++++++++++----------- components/space/index.tsx | 65 ++++++----- 5 files changed, 141 insertions(+), 149 deletions(-) diff --git a/components/_util/props-util.ts b/components/_util/props-util.ts index 368ed2a00..f65b04425 100644 --- a/components/_util/props-util.ts +++ b/components/_util/props-util.ts @@ -1,6 +1,15 @@ import isPlainObject from 'lodash/isPlainObject'; import classNames from 'classnames'; -import { isVNode, Fragment, Comment, Text, h, VNode, Prop, PropOptions } from 'vue'; +import { + isVNode, + Fragment, + Comment, + Text, + h, + VNode, + ComponentPublicInstance, + PropOptions, +} from 'vue'; import { camelize, hyphenate, isOn, resolvePropValue } from './util'; import isValid from './isValid'; // function getType(fn) { @@ -40,7 +49,7 @@ const parseStyleText = (cssText = '', camel) => { return res; }; -const hasProp = (instance, prop) => { +const hasProp = (instance: VNode, prop: string) => { return prop in getOptionProps(instance); }; // 重构后直接使用 hasProp 替换 @@ -115,14 +124,14 @@ const getAllChildren = ele => { const getSlotOptions = () => { throw Error('使用 .type 直接取值'); }; -const findDOMNode = instance => { +const findDOMNode = (instance: ComponentPublicInstance) => { let node = instance && (instance.$el || instance); while (node && !node.tagName) { node = node.nextSibling; } return node; }; -const getOptionProps = instance => { +const getOptionProps = (instance: ComponentPublicInstance) => { const res = {}; if (instance.$ && instance.$.vnode) { const props = instance.$.vnode.props || {}; @@ -149,7 +158,12 @@ const getOptionProps = instance => { } return res; }; -const getComponent = (instance, prop = 'default', options = instance, execute = true) => { +const getComponent = ( + instance: ComponentPublicInstance, + prop: string = 'default', + options = instance, + execute: boolean = true, +) => { let com = undefined; if (instance.$) { const temp = instance[prop]; @@ -228,7 +242,7 @@ const getAllProps = ele => { return props; }; -const getPropsData = ins => { +const getPropsData = (ins: ComponentPublicInstance) => { const vnode = ins.$ ? ins.$ : ins; const res = {}; const originProps = vnode.props || {}; @@ -333,7 +347,7 @@ export function isFragment(c) { return c.length === 1 && c[0].type === Fragment; } -export function isEmptyElement(c) { +export function isEmptyElement(c: VNode) { return ( c.type === Comment || (c.type === Fragment && c.children.length === 0) || @@ -341,7 +355,7 @@ export function isEmptyElement(c) { ); } -export function isStringElement(c) { +export function isStringElement(c: VNode): boolean { return c && c.type === Text; } @@ -373,22 +387,6 @@ const initDefaultProps = ( return propTypes; }; -export function mergeProps() { - const args = [].slice.call(arguments, 0); - const props = {}; - args.forEach((p = {}) => { - for (const [k, v] of Object.entries(p)) { - props[k] = props[k] || {}; - if (isPlainObject(v)) { - Object.assign(props[k], v); - } else { - props[k] = v; - } - } - }); - return props; -} - function isValidElement(element) { return element && element.__v_isVNode && typeof element.type !== 'symbol'; // remove text node } diff --git a/components/config-provider/index.tsx b/components/config-provider/index.tsx index 443a74885..33e12f9a3 100644 --- a/components/config-provider/index.tsx +++ b/components/config-provider/index.tsx @@ -70,7 +70,7 @@ const ConfigProvider = { }; export const ConfigConsumerProps = { - getPrefixCls: (suffixCls, customizePrefixCls) => { + getPrefixCls: (suffixCls: string, customizePrefixCls?: string) => { if (customizePrefixCls) return customizePrefixCls; return `ant-${suffixCls}`; }, diff --git a/components/config-provider/renderEmpty.tsx b/components/config-provider/renderEmpty.tsx index eeacbfc5f..4fe6708ad 100644 --- a/components/config-provider/renderEmpty.tsx +++ b/components/config-provider/renderEmpty.tsx @@ -1,38 +1,36 @@ import { inject } from 'vue'; -import PropTypes from '../_util/vue-types'; import Empty from '../empty'; -import { ConfigConsumerProps } from './'; +import { ConfigConsumerProps } from '.'; -const RenderEmpty = { - props: { - componentName: PropTypes.string, - }, - setup(props) { - const configProvider = inject('configProvider', ConfigConsumerProps); - function renderHtml(componentName: string) { - const getPrefixCls = configProvider.getPrefixCls; - const prefix = getPrefixCls('empty'); - switch (componentName) { - case 'Table': - case 'List': - return } />; +export interface RenderEmptyProps { + componentName?: string; +} - case 'Select': - case 'TreeSelect': - case 'Cascader': - case 'Transfer': - case 'Mentions': - return } class={`${prefix}-small`} />; +const RenderEmpty = (props: RenderEmptyProps) => { + const configProvider = inject('configProvider', ConfigConsumerProps); + const renderHtml = (componentName?: string) => { + const { getPrefixCls } = configProvider; + const prefix = getPrefixCls('empty'); + switch (componentName) { + case 'Table': + case 'List': + return ; - default: - return ; - } + case 'Select': + case 'TreeSelect': + case 'Cascader': + case 'Transfer': + case 'Mentions': + return ; + + default: + return ; } - return () => renderHtml(props.componentName); - }, + }; + return () => renderHtml(props.componentName); }; -function renderEmpty(componentName) { +function renderEmpty(componentName?: string) { return ; } diff --git a/components/empty/index.tsx b/components/empty/index.tsx index 32ce1299f..e266265c2 100644 --- a/components/empty/index.tsx +++ b/components/empty/index.tsx @@ -1,4 +1,4 @@ -import { defineComponent, CSSProperties, VNodeChild, inject, App, PropType, VNode } from 'vue'; +import { CSSProperties, VNodeChild, inject, App, SetupContext } from 'vue'; import classNames from 'classnames'; import { ConfigConsumerProps } from '../config-provider'; import LocaleReceiver from '../locale-provider/LocaleReceiver'; @@ -13,81 +13,74 @@ export interface TransferLocale { description: string; } -const Empty = defineComponent({ - name: 'AEmpty', - props: { - prefixCls: { - type: String, - }, - imageStyle: { - type: Object as PropType, - }, - image: { - type: Object as PropType, - }, - description: { - type: String, - }, - }, - setup(props, { slots }) { - const configProvider = inject('configProvider', ConfigConsumerProps); - const { getPrefixCls } = configProvider; - const { - class: className, - prefixCls: customizePrefixCls, - image = defaultEmptyImg, - description, - imageStyle, - ...restProps - } = props; +export interface EmptyProps { + prefixCls?: string; + class?: string; + style?: CSSProperties; + imageStyle?: CSSProperties; + image?: VNodeChild | JSX.Element; + description?: VNodeChild | JSX.Element; + children?: VNodeChild | JSX.Element; +} - return () => ( - { - const prefixCls = getPrefixCls('empty', customizePrefixCls); - const des = typeof description !== 'undefined' ? description : locale.description; - const alt = typeof des === 'string' ? des : 'empty'; - let imageNode: any = null; +const Empty = (props: EmptyProps, { slots }: SetupContext) => { + const configProvider = inject('configProvider', ConfigConsumerProps); + const { getPrefixCls } = configProvider; + const { + prefixCls: customizePrefixCls, + class: className, + image = defaultEmptyImg, + description, + imageStyle, + ...restProps + } = props; - if (typeof image === 'string') { - imageNode = {alt}; - } else { - imageNode = image; - } + return () => ( + { + const prefixCls = getPrefixCls('empty', customizePrefixCls); + const des = typeof description !== 'undefined' ? description : locale.description; + const alt = typeof des === 'string' ? des : 'empty'; + let imageNode: EmptyProps['image'] = null; - return ( -
-
- {imageNode} -
- {des &&

{des}

} - {slots.default && ( -
{filterEmpty(slots.default?.())}
- )} + if (typeof image === 'string') { + imageNode = {alt}; + } else { + imageNode = image; + } + + return ( +
+
+ {imageNode}
- ) as VNodeChild; - }} - /> - ); - }, -}); + {des &&

{des}

} + {slots.default && ( +
{filterEmpty(slots.default())}
+ )} +
+ ) as VNodeChild; + }} + /> + ); +}; Empty.PRESENTED_IMAGE_DEFAULT = defaultEmptyImg; Empty.PRESENTED_IMAGE_SIMPLE = simpleEmptyImg; /* istanbul ignore next */ Empty.install = function(app: App) { - app.component(Empty.name, Empty); + app.component('AEmpty', Empty); }; export default Empty; diff --git a/components/space/index.tsx b/components/space/index.tsx index 3105b7cf8..39d42932e 100644 --- a/components/space/index.tsx +++ b/components/space/index.tsx @@ -1,15 +1,14 @@ -import { inject, defineComponent, App } from 'vue'; +import { inject, App, CSSProperties, SetupContext } from 'vue'; import { initDefaultProps } from '../_util/props-util'; -import PropTypes from '../_util/vue-types'; import { filterEmpty } from '../_util/props-util'; import { ConfigConsumerProps } from '../config-provider'; -export const SpaceProps = { - prefixCls: PropTypes.string, - align: PropTypes.tuple<'start' | 'end' | 'center' | 'baseline'>(), - size: PropTypes.tuple<'small' | 'middle' | 'large'>(), - direction: PropTypes.tuple<'horizontal' | 'vertical'>(), -}; +// export const SpaceProps = { +// prefixCls: PropTypes.string, +// align: PropTypes.tuple<'start' | 'end' | 'center' | 'baseline'>(), +// size: PropTypes.tuple<'small' | 'middle' | 'large'>(), +// direction: PropTypes.tuple<'horizontal' | 'vertical'>(), +// }; const spaceSize = { small: 8, @@ -17,36 +16,39 @@ const spaceSize = { large: 24, }; -// export const SpaceProps = { -// prefixCls: PropTypes.string, -// size: SpaceSizeType, -// direction: PropTypes.oneOf(['horizontal', 'vertical']), -// align: PropTypes.oneOf(['start', 'end', 'center', 'baseline']), -// }; +export interface SpaceProps { + prefixCls?: string; + className?: string; + style?: CSSProperties; + size?: SizeType | number; + direction?: 'horizontal' | 'vertical'; + // No `stretch` since many components do not support that. + align?: 'start' | 'end' | 'center' | 'baseline'; +} -const Space = (props, { slots }) => { +const Space = (props: SpaceProps, { slots }: SetupContext) => { const configProvider = inject('configProvider', ConfigConsumerProps); const { align, size, direction, prefixCls: customizePrefixCls } = props; - const { getPrefixCls } = configProvider; - const prefixCls = getPrefixCls('space', customizePrefixCls); - const items = filterEmpty(slots.default?.()); - const len = items.length; + const { getPrefixCls } = configProvider; + const prefixCls = getPrefixCls('space', customizePrefixCls); + const items = filterEmpty(slots.default?.()); + const len = items.length; - if (len === 0) { - return null; - } + if (len === 0) { + return null; + } - const mergedAlign = align === undefined && direction === 'horizontal' ? 'center' : align; + const mergedAlign = align === undefined && direction === 'horizontal' ? 'center' : align; - const someSpaceClass = { - [prefixCls]: true, - [`${prefixCls}-${direction}`]: true, - [`${prefixCls}-align-${mergedAlign}`]: mergedAlign, - }; + const someSpaceClass = { + [prefixCls]: true, + [`${prefixCls}-${direction}`]: true, + [`${prefixCls}-align-${mergedAlign}`]: mergedAlign, + }; - const itemClassName = `${prefixCls}-item`; - const marginDirection = 'marginRight'; // directionConfig === 'rtl' ? 'marginLeft' : 'marginRight'; + const itemClassName = `${prefixCls}-item`; + const marginDirection = 'marginRight'; // directionConfig === 'rtl' ? 'marginLeft' : 'marginRight'; return (
@@ -75,7 +77,8 @@ Space.props = initDefaultProps(SpaceProps, { }); /* istanbul ignore next */ -Space.install = function(app) { +Space.install = function(app: App) { app.component('ASpace', Space); }; + export default Space;