From 51cd49cf9cbf6d757cb7ab929e096028dcdc2794 Mon Sep 17 00:00:00 2001 From: tangjinzhou <415800467@qq.com> Date: Mon, 15 Mar 2021 22:53:47 +0800 Subject: [PATCH] fix: typography --- components/typography/Base.tsx | 16 +++++----------- components/typography/Text.tsx | 3 +-- components/typography/Typography.tsx | 10 +++++----- components/typography/__tests__/index.test.js | 14 ++++++++------ examples/App.vue | 2 +- v2-doc | 2 +- 6 files changed, 21 insertions(+), 26 deletions(-) diff --git a/components/typography/Base.tsx b/components/typography/Base.tsx index 99fad0310..b1bc239ce 100644 --- a/components/typography/Base.tsx +++ b/components/typography/Base.tsx @@ -37,13 +37,13 @@ export type BaseType = 'secondary' | 'success' | 'warning' | 'danger'; const isLineClampSupport = isStyleSupport('webkitLineClamp'); const isTextOverflowSupport = isStyleSupport('textOverflow'); -interface CopyConfig { +export interface CopyConfig { text?: string; onCopy?: () => void; tooltip?: boolean; } -interface EditConfig { +export interface EditConfig { editing?: boolean; tooltip?: boolean; onStart?: () => void; @@ -58,7 +58,7 @@ export interface EllipsisConfig { rows?: number; expandable?: boolean; suffix?: string; - symbol?: VNodeTypes; + symbol?: string; onExpand?: EventHandlerNonNull; onEllipsis?: (ellipsis: boolean) => void; tooltip?: boolean; @@ -348,13 +348,8 @@ const Base = defineComponent({ // force render expand icon for measure usage or it will cause dead loop if (!forceRender && (state.expanded || !state.isEllipsis)) return null; - - let expandContent; - if (symbol) { - expandContent = symbol; - } else { - expandContent = state.expandStr; - } + const expandContent = + (slots.ellipsisSymbol ? slots.ellipsisSymbol() : symbol) || state.expandStr; return ( ({ }); Base.props = baseProps(); - export default Base; diff --git a/components/typography/Text.tsx b/components/typography/Text.tsx index 879d932a0..54a52b025 100644 --- a/components/typography/Text.tsx +++ b/components/typography/Text.tsx @@ -1,5 +1,4 @@ import { FunctionalComponent } from 'vue'; -import omit from 'omit.js'; import warning from '../_util/warning'; import Base, { baseProps, BlockProps, EllipsisConfig } from './Base'; import Omit from 'omit.js'; @@ -21,7 +20,7 @@ const Text: FunctionalComponent = (props, { slots, attrs }) => { ...props, ellipsis: ellipsis && typeof ellipsis === 'object' - ? omit(ellipsis as any, ['expandable', 'rows']) + ? Omit(ellipsis as any, ['expandable', 'rows']) : ellipsis, component: 'span', ...attrs, diff --git a/components/typography/Typography.tsx b/components/typography/Typography.tsx index 63b4c2828..152a5315d 100644 --- a/components/typography/Typography.tsx +++ b/components/typography/Typography.tsx @@ -2,7 +2,7 @@ import Text from './Text'; import Title from './Title'; import Paragraph from './Paragraph'; import PropTypes from '../_util/vue-types'; -import { defineComponent, HTMLAttributes, App, Plugin, computed } from 'vue'; +import { defineComponent, HTMLAttributes, App, Plugin } from 'vue'; import useConfigInject from '../_util/hooks/useConfigInject'; import Link from './Link'; import classNames from '../_util/classNames'; @@ -17,10 +17,10 @@ interface InternalTypographyProps extends TypographyProps { const Typography = defineComponent({ name: 'ATypography', - Text: Text, - Title: Title, - Paragraph: Paragraph, - Link: Link, + Text, + Title, + Paragraph, + Link, inheritAttrs: false, setup(props, { slots, attrs }) { const { prefixCls } = useConfigInject('typography', props); diff --git a/components/typography/__tests__/index.test.js b/components/typography/__tests__/index.test.js index ffed6d7c5..7122cdbab 100644 --- a/components/typography/__tests__/index.test.js +++ b/components/typography/__tests__/index.test.js @@ -1,9 +1,10 @@ import { mount } from '@vue/test-utils'; import { asyncExpect, sleep } from '@/tests/utils'; import KeyCode from '../../_util/KeyCode'; -import copy from '../_util/copy-to-clipboard'; +import copy from '../../_util/copy-to-clipboard'; import Title from '../Title'; -import AParagraph from '../Paragraph'; +import Paragraph from '../Paragraph'; +import Link from '../Link'; import Base from '../Base'; import mountTest from '../../../tests/shared/mountTest'; import { nextTick, createTextVNode, createVNode } from 'vue'; @@ -11,9 +12,10 @@ import { nextTick, createTextVNode, createVNode } from 'vue'; jest.mock('copy-to-clipboard'); describe('Typography', () => { - mountTest(AParagraph); + mountTest(Paragraph); mountTest(Base); mountTest(Title); + mountTest(Link); const LINE_STR_COUNT = 20; const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {}); @@ -272,7 +274,7 @@ describe('Typography', () => { const wrapper = mount(Component, { global: { components: { - AParagraph, + Paragraph, }, }, props: { @@ -335,8 +337,8 @@ describe('Typography', () => { }); }); - it('should focus at the end of textarea', async () => { - const wrapper = mount(AParagraph, { + fit('should focus at the end of textarea', async () => { + const wrapper = mount(Paragraph, { props: { editable: true, }, diff --git a/examples/App.vue b/examples/App.vue index 722f4dafc..ea30ba29f 100644 --- a/examples/App.vue +++ b/examples/App.vue @@ -5,7 +5,7 @@