From f2bfc0335f59a83f1b2c642d4cbd4a5a1566f424 Mon Sep 17 00:00:00 2001
From: Hsuan Lee
Date: Thu, 17 Jan 2019 11:25:31 +0800
Subject: [PATCH 01/10] feat(module:typography): add typography component
---
components/components.less | 1 +
components/core/public-api.ts | 1 +
.../services/nz-copy-to-clipboard.service.ts | 52 ++++
components/core/services/public-api.ts | 1 +
components/core/trans-button/index.ts | 9 +
.../trans-button/nz-trans-button.directive.ts | 14 +
components/core/trans-button/public-api.ts | 9 +
components/core/util/public-api.ts | 2 +
components/core/util/style-checke.ts | 17 ++
components/core/util/text-measure.ts | 243 +++++++++++++++++
components/i18n/languages/en_US.ts | 9 +
components/i18n/languages/es_ES.ts | 9 +
components/i18n/languages/it_IT.ts | 6 +
components/i18n/languages/ru_RU.ts | 9 +
components/i18n/languages/tr_TR.ts | 6 +
components/i18n/languages/zh_CN.ts | 9 +
components/i18n/languages/zh_TW.ts | 3 +
components/icon/nz-icon.service.ts | 4 +
components/input/nz-autosize.directive.ts | 2 +-
components/ng-zorro-antd.module.ts | 5 +-
components/typography/demo/basic.md | 14 +
components/typography/demo/basic.ts | 78 ++++++
components/typography/demo/ellipsis.md | 14 +
components/typography/demo/ellipsis.ts | 41 +++
components/typography/demo/interactive.md | 14 +
components/typography/demo/interactive.ts | 18 ++
components/typography/demo/text.md | 14 +
components/typography/demo/text.ts | 30 +++
components/typography/demo/title.md | 14 +
components/typography/demo/title.ts | 15 ++
components/typography/doc/index.en-US.md | 31 +++
components/typography/doc/index.zh-CN.md | 31 +++
components/typography/index.ts | 1 +
.../typography/nz-text-copy.component.html | 11 +
.../typography/nz-text-copy.component.ts | 83 ++++++
.../typography/nz-text-edit.component.html | 22 ++
.../typography/nz-text-edit.component.ts | 100 +++++++
.../typography/nz-typography.component.html | 24 ++
.../typography/nz-typography.component.ts | 247 ++++++++++++++++++
components/typography/nz-typography.module.ts | 27 ++
components/typography/nz-typography.spec.ts | 210 +++++++++++++++
components/typography/package.json | 7 +
components/typography/public-api.ts | 12 +
components/typography/style/entry.less | 5 +
components/typography/style/index.less | 225 ++++++++++++++++
45 files changed, 1697 insertions(+), 2 deletions(-)
create mode 100644 components/core/services/nz-copy-to-clipboard.service.ts
create mode 100644 components/core/trans-button/index.ts
create mode 100755 components/core/trans-button/nz-trans-button.directive.ts
create mode 100644 components/core/trans-button/public-api.ts
create mode 100644 components/core/util/style-checke.ts
create mode 100644 components/core/util/text-measure.ts
create mode 100644 components/typography/demo/basic.md
create mode 100644 components/typography/demo/basic.ts
create mode 100644 components/typography/demo/ellipsis.md
create mode 100644 components/typography/demo/ellipsis.ts
create mode 100644 components/typography/demo/interactive.md
create mode 100644 components/typography/demo/interactive.ts
create mode 100644 components/typography/demo/text.md
create mode 100644 components/typography/demo/text.ts
create mode 100644 components/typography/demo/title.md
create mode 100644 components/typography/demo/title.ts
create mode 100644 components/typography/doc/index.en-US.md
create mode 100644 components/typography/doc/index.zh-CN.md
create mode 100644 components/typography/index.ts
create mode 100644 components/typography/nz-text-copy.component.html
create mode 100644 components/typography/nz-text-copy.component.ts
create mode 100644 components/typography/nz-text-edit.component.html
create mode 100644 components/typography/nz-text-edit.component.ts
create mode 100644 components/typography/nz-typography.component.html
create mode 100644 components/typography/nz-typography.component.ts
create mode 100644 components/typography/nz-typography.module.ts
create mode 100644 components/typography/nz-typography.spec.ts
create mode 100644 components/typography/package.json
create mode 100644 components/typography/public-api.ts
create mode 100644 components/typography/style/entry.less
create mode 100644 components/typography/style/index.less
diff --git a/components/components.less b/components/components.less
index ce82446ad87..d21b7172e50 100644
--- a/components/components.less
+++ b/components/components.less
@@ -50,6 +50,7 @@
@import "./timeline/style/entry.less";
@import "./tooltip/style/entry.less";
@import "./transfer/style/entry.less";
+@import "typography/style/entry.less";
@import "./upload/style/entry.less";
@import "./auto-complete/style/entry.less";
@import "./cascader/style/entry.less";
diff --git a/components/core/public-api.ts b/components/core/public-api.ts
index bf33ab9b4e6..e76d3260bad 100644
--- a/components/core/public-api.ts
+++ b/components/core/public-api.ts
@@ -22,3 +22,4 @@ export * from './wave/public-api';
export * from './dropdown/public-api';
export * from './logger/public-api';
export * from './responsive/public-api';
+export * from './trans-button/public-api';
diff --git a/components/core/services/nz-copy-to-clipboard.service.ts b/components/core/services/nz-copy-to-clipboard.service.ts
new file mode 100644
index 00000000000..51133745c4c
--- /dev/null
+++ b/components/core/services/nz-copy-to-clipboard.service.ts
@@ -0,0 +1,52 @@
+/**
+ * @license
+ * Copyright Alibaba.com All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
+ */
+
+import { DOCUMENT } from '@angular/common';
+import { Inject, Injectable } from '@angular/core';
+
+@Injectable({
+ providedIn: 'root'
+})
+export class NzCopyToClipboardService {
+ // tslint:disable-next-line:no-any
+ constructor(@Inject(DOCUMENT) private document: any) {}
+
+ copy(text: string): Promise {
+ return new Promise(
+ (resolve, reject): void => {
+ let copyTextArea = null;
+ try {
+ // tslint:disable-next-line no-any
+ copyTextArea = this.document.createElement('textarea') as any;
+ copyTextArea.style!.all = 'unset';
+ copyTextArea.style.position = 'fixed';
+ copyTextArea.style.top = '0';
+ copyTextArea.style.clip = 'rect(0, 0, 0, 0)';
+ copyTextArea.style.whiteSpace = 'pre';
+ copyTextArea.style.webkitUserSelect = 'text';
+ copyTextArea.style!.MozUserSelect = 'text';
+ copyTextArea.style.msUserSelect = 'text';
+ copyTextArea.style.userSelect = 'text';
+ this.document.body.appendChild(copyTextArea);
+ copyTextArea.value = text;
+ copyTextArea.select();
+
+ const successful = this.document.execCommand('copy');
+ if (!successful) {
+ reject(text);
+ }
+ resolve(text);
+ } finally {
+ if (copyTextArea) {
+ this.document.body.removeChild(copyTextArea);
+ }
+ }
+ }
+ );
+ }
+}
diff --git a/components/core/services/public-api.ts b/components/core/services/public-api.ts
index 185367cbd4a..b7976ddc771 100644
--- a/components/core/services/public-api.ts
+++ b/components/core/services/public-api.ts
@@ -8,3 +8,4 @@
export * from './nz-measure-scrollbar.service';
export * from './update-host-class.service';
+export * from './nz-copy-to-clipboard.service';
diff --git a/components/core/trans-button/index.ts b/components/core/trans-button/index.ts
new file mode 100644
index 00000000000..f17e95188c8
--- /dev/null
+++ b/components/core/trans-button/index.ts
@@ -0,0 +1,9 @@
+/**
+ * @license
+ * Copyright Alibaba.com All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
+ */
+
+export * from './public-api';
diff --git a/components/core/trans-button/nz-trans-button.directive.ts b/components/core/trans-button/nz-trans-button.directive.ts
new file mode 100755
index 00000000000..d8402a6f3e4
--- /dev/null
+++ b/components/core/trans-button/nz-trans-button.directive.ts
@@ -0,0 +1,14 @@
+import { Directive } from '@angular/core';
+
+@Directive({
+ selector: 'button[nz-trans-button]',
+ host : {
+ '[style.border]' : '"0"',
+ '[style.background]' : '"transparent"',
+ '[style.padding]' : '"0"',
+ '[style.line-height]': '"inherit"'
+ }
+})
+export class NzTransButtonDirective {
+
+}
\ No newline at end of file
diff --git a/components/core/trans-button/public-api.ts b/components/core/trans-button/public-api.ts
new file mode 100644
index 00000000000..d71b8eaee52
--- /dev/null
+++ b/components/core/trans-button/public-api.ts
@@ -0,0 +1,9 @@
+/**
+ * @license
+ * Copyright Alibaba.com All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
+ */
+
+export { NzTransButtonDirective } from './nz-trans-button.directive';
diff --git a/components/core/util/public-api.ts b/components/core/util/public-api.ts
index 987168ee90e..010dc5e55e4 100644
--- a/components/core/util/public-api.ts
+++ b/components/core/util/public-api.ts
@@ -18,3 +18,5 @@ export * from './scroll-into-view-if-needed';
export * from './textarea-caret-position';
export * from './throttleByAnimationFrame';
export * from './time';
+export * from './style-checke';
+export * from './text-measure';
diff --git a/components/core/util/style-checke.ts b/components/core/util/style-checke.ts
new file mode 100644
index 00000000000..30ed9148f33
--- /dev/null
+++ b/components/core/util/style-checke.ts
@@ -0,0 +1,17 @@
+/**
+ * @license
+ * Copyright Alibaba.com All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
+ */
+
+export function isStyleSupport(styleName: string | string[]): boolean {
+ if (typeof window !== 'undefined' && window.document && window.document.documentElement) {
+ const styleNameList = Array.isArray(styleName) ? styleName : [styleName];
+ const { documentElement } = window.document;
+
+ return styleNameList.some(name => name in documentElement.style);
+ }
+ return false;
+}
diff --git a/components/core/util/text-measure.ts b/components/core/util/text-measure.ts
new file mode 100644
index 00000000000..2205d37f028
--- /dev/null
+++ b/components/core/util/text-measure.ts
@@ -0,0 +1,243 @@
+/**
+ * @license
+ * Copyright Alibaba.com All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
+ */
+
+export interface MeasureResult {
+ finished: boolean;
+ node: Node | null;
+}
+
+// We only handle element & text node.
+const ELEMENT_NODE = 1;
+const TEXT_NODE = 3;
+const COMMENT_NODE = 8;
+
+let ellipsisContainer: HTMLParagraphElement;
+
+const wrapperStyle = {
+ padding: '0',
+ margin: '0',
+ display: 'inline',
+ lineHeight: 'inherit'
+};
+
+function pxToNumber(value: string | null): number {
+ if (!value) {
+ return 0;
+ }
+
+ const match = value.match(/^\d*(\.\d*)?/);
+
+ return match ? Number(match[0]) : 0;
+}
+
+function styleToString(style: CSSStyleDeclaration): string {
+ // There are some different behavior between Firefox & Chrome.
+ // We have to handle this ourself.
+ const styleNames: string[] = Array.prototype.slice.apply(style);
+ return styleNames.map(name => `${name}: ${style.getPropertyValue(name)};`).join('');
+}
+
+function mergeChildren(children: Node[]): Node[] {
+ const childList: Node[] = [];
+
+ children.forEach((child: Node) => {
+ const prevChild = childList[childList.length - 1];
+ if (prevChild && child.nodeType === TEXT_NODE && prevChild.nodeType === TEXT_NODE) {
+ (prevChild as Text).data += (child as Text).data;
+ } else {
+ childList.push(child);
+ }
+ });
+
+ return childList;
+}
+
+export function measure(
+ originEle: HTMLElement,
+ rows: number,
+ contentNodes: Node[],
+ fixedContent: HTMLElement[],
+ ellipsisStr: string
+): { contentNodes: Node[]; text: string; ellipsis: boolean } {
+ if (!ellipsisContainer) {
+ ellipsisContainer = document.createElement('div');
+ ellipsisContainer.setAttribute('aria-hidden', 'true');
+ document.body.appendChild(ellipsisContainer);
+ }
+
+ // Get origin style
+ const originStyle = window.getComputedStyle(originEle);
+ const originCSS = styleToString(originStyle);
+ const lineHeight = pxToNumber(originStyle.lineHeight);
+ const maxHeight =
+ lineHeight * (rows + 1) + pxToNumber(originStyle.paddingTop) + pxToNumber(originStyle.paddingBottom);
+ // Set shadow
+ ellipsisContainer.setAttribute('style', originCSS);
+ ellipsisContainer.style.position = 'fixed';
+ ellipsisContainer.style.left = '0';
+ ellipsisContainer.style.height = 'auto';
+ ellipsisContainer.style.minHeight = 'auto';
+ ellipsisContainer.style.maxHeight = 'auto';
+ ellipsisContainer.style.top = '-999999px';
+ ellipsisContainer.style.zIndex = '-1000';
+
+ // clean up css overflow
+ ellipsisContainer.style.textOverflow = 'clip';
+ ellipsisContainer.style.whiteSpace = 'normal';
+ // tslint:disable-next-line no-any
+ (ellipsisContainer.style as any).webkitLineClamp = 'none';
+
+ const contentList = mergeChildren(contentNodes);
+ const container = document.createElement('div');
+ const contentContainer = document.createElement('span');
+ const fixedContainer = document.createElement('span');
+
+ // Add styles in container
+ Object.assign(container.style, wrapperStyle);
+ Object.assign(contentContainer.style, wrapperStyle);
+ Object.assign(fixedContainer.style, wrapperStyle);
+
+ contentList.forEach(n => {
+ contentContainer.appendChild(n);
+ });
+ fixedContent.forEach(node => {
+ fixedContainer.appendChild(node.cloneNode(true));
+ });
+ container.appendChild(contentContainer);
+ container.appendChild(fixedContainer);
+
+ // Render in the fake container
+ ellipsisContainer.appendChild(container);
+
+ // Check if ellipsis in measure div is height enough for content
+ function inRange(): boolean {
+ return ellipsisContainer.offsetHeight < maxHeight;
+ }
+
+ if (inRange()) {
+ ellipsisContainer.removeChild(container);
+ return { contentNodes, text: ellipsisContainer.innerHTML, ellipsis: false };
+ }
+
+ // We should clone the childNode since they're controlled by React and we can't reuse it without warning
+ const childNodes: ChildNode[] = Array.prototype.slice
+ .apply(ellipsisContainer.childNodes[0].childNodes[0].cloneNode(true).childNodes)
+ .filter(({ nodeType }: ChildNode) => nodeType !== COMMENT_NODE);
+ const fixedNodes: ChildNode[] = Array.prototype.slice.apply(
+ ellipsisContainer.childNodes[0].childNodes[1].cloneNode(true).childNodes
+ );
+ ellipsisContainer.removeChild(container);
+
+ // ========================= Find match ellipsis content =========================
+ ellipsisContainer.innerHTML = '';
+
+ // Create origin content holder
+ const ellipsisContentHolder = document.createElement('span');
+ ellipsisContainer.appendChild(ellipsisContentHolder);
+ const ellipsisTextNode = document.createTextNode(ellipsisStr);
+ ellipsisContentHolder.appendChild(ellipsisTextNode);
+
+ fixedNodes.forEach(childNode => {
+ ellipsisContainer.appendChild(childNode);
+ });
+
+ // Append before fixed nodes
+ function appendChildNode(node: ChildNode): void {
+ ellipsisContentHolder.insertBefore(node, ellipsisTextNode);
+ }
+
+ // Get maximum text
+ function measureText(
+ textNode: Text,
+ fullText: string,
+ startLoc: number = 0,
+ endLoc: number = fullText.length,
+ lastSuccessLoc: number = 0
+ ): MeasureResult {
+ const midLoc = Math.floor((startLoc + endLoc) / 2);
+ const currentText = fullText.slice(0, midLoc);
+ textNode.textContent = currentText;
+
+ if (startLoc >= endLoc - 1) {
+ // Loop when step is small
+ for (let step = endLoc; step >= startLoc; step -= 1) {
+ const currentStepText = fullText.slice(0, step);
+ textNode.textContent = currentStepText;
+
+ if (inRange()) {
+ return step === fullText.length
+ ? {
+ finished: false,
+ node: document.createTextNode(fullText)
+ }
+ : {
+ finished: true,
+ node: document.createTextNode(currentStepText)
+ };
+ }
+ }
+ }
+ if (inRange()) {
+ return measureText(textNode, fullText, midLoc, endLoc, midLoc);
+ } else {
+ return measureText(textNode, fullText, startLoc, midLoc, lastSuccessLoc);
+ }
+ }
+
+ function measureNode(childNode: ChildNode, index: number): MeasureResult {
+ const type = childNode.nodeType;
+
+ if (type === ELEMENT_NODE) {
+ // We don't split element, it will keep if whole element can be displayed.
+ appendChildNode(childNode);
+ if (inRange()) {
+ return {
+ finished: false,
+ node: contentList[index]
+ };
+ }
+
+ // Clean up if can not pull in
+ ellipsisContentHolder.removeChild(childNode);
+ return {
+ finished: true,
+ node: null
+ };
+ } else if (type === TEXT_NODE) {
+ const fullText = childNode.textContent || '';
+ const textNode = document.createTextNode(fullText);
+ appendChildNode(textNode);
+ return measureText(textNode, fullText);
+ }
+
+ // Not handle other type of content
+ // PS: This code should not be attached after react 16
+ return {
+ finished: false,
+ node: null
+ };
+ }
+
+ const ellipsisNodes: Node[] = [];
+ childNodes.some((childNode, index) => {
+ const { finished, node } = measureNode(childNode, index);
+ if (node) {
+ ellipsisNodes.push(node);
+ }
+ return finished;
+ });
+ const result = {
+ contentNodes: ellipsisNodes,
+ text: ellipsisContainer.innerHTML,
+ ellipsis: true
+ };
+ while (ellipsisContainer.firstChild) {
+ ellipsisContainer.removeChild(ellipsisContainer.firstChild);
+ }
+ return result;
+}
diff --git a/components/i18n/languages/en_US.ts b/components/i18n/languages/en_US.ts
index 02cae05b950..2e487c393f4 100644
--- a/components/i18n/languages/en_US.ts
+++ b/components/i18n/languages/en_US.ts
@@ -51,5 +51,14 @@ export default {
},
Empty: {
description: 'No Data'
+ },
+ Text: {
+ edit: 'edit',
+ copy: 'copy',
+ copied: 'copy success',
+ expand: 'expand'
+ },
+ PageHeader: {
+ back: 'back'
}
};
diff --git a/components/i18n/languages/es_ES.ts b/components/i18n/languages/es_ES.ts
index 5b18a37398e..17b8dc6bd4d 100644
--- a/components/i18n/languages/es_ES.ts
+++ b/components/i18n/languages/es_ES.ts
@@ -46,5 +46,14 @@ export default {
},
Empty: {
description: 'No hay datos'
+ },
+ Text: {
+ edit: 'editar',
+ copy: 'copiar',
+ copied: 'copiado',
+ expand: 'expandir'
+ },
+ PageHeader: {
+ back: 'volver'
}
};
diff --git a/components/i18n/languages/it_IT.ts b/components/i18n/languages/it_IT.ts
index 7a7a563d28f..3ed116ec6b8 100644
--- a/components/i18n/languages/it_IT.ts
+++ b/components/i18n/languages/it_IT.ts
@@ -47,5 +47,11 @@ export default {
},
Empty: {
description: 'Nessun dato'
+ },
+ Text: {
+ edit: 'modifica',
+ copy: 'copia',
+ copied: 'copia effettuata',
+ expand: 'espandi'
}
};
diff --git a/components/i18n/languages/ru_RU.ts b/components/i18n/languages/ru_RU.ts
index 801441a795e..cf14713b140 100644
--- a/components/i18n/languages/ru_RU.ts
+++ b/components/i18n/languages/ru_RU.ts
@@ -46,5 +46,14 @@ export default {
},
Empty: {
description: 'Нет данных'
+ },
+ Text: {
+ edit: 'редактировать',
+ copy: 'копировать',
+ copied: 'скопировано',
+ expand: 'раскрыть'
+ },
+ PageHeader: {
+ back: 'назад'
}
};
diff --git a/components/i18n/languages/tr_TR.ts b/components/i18n/languages/tr_TR.ts
index c9caa1e6f93..c761c0e065b 100644
--- a/components/i18n/languages/tr_TR.ts
+++ b/components/i18n/languages/tr_TR.ts
@@ -46,5 +46,11 @@ export default {
},
Empty: {
description: 'Veri Yok'
+ },
+ Text: {
+ edit: 'düzenle',
+ copy: 'kopyala',
+ copied: 'kopyalandı',
+ expand: 'genişlet'
}
};
diff --git a/components/i18n/languages/zh_CN.ts b/components/i18n/languages/zh_CN.ts
index 409c6a44f86..f4d5ede807c 100644
--- a/components/i18n/languages/zh_CN.ts
+++ b/components/i18n/languages/zh_CN.ts
@@ -51,5 +51,14 @@ export default {
},
Empty: {
description: '暂无数据'
+ },
+ Text: {
+ edit: '编辑',
+ copy: '复制',
+ copied: '复制成功',
+ expand: '展开'
+ },
+ PageHeader: {
+ back: '返回'
}
};
diff --git a/components/i18n/languages/zh_TW.ts b/components/i18n/languages/zh_TW.ts
index 1199cf2da75..0b6b15b9fa6 100644
--- a/components/i18n/languages/zh_TW.ts
+++ b/components/i18n/languages/zh_TW.ts
@@ -46,5 +46,8 @@ export default {
},
Empty: {
description: '無此資料'
+ },
+ PageHeader: {
+ back: '返回'
}
};
diff --git a/components/icon/nz-icon.service.ts b/components/icon/nz-icon.service.ts
index 35f314edcdc..f89d04f74e2 100644
--- a/components/icon/nz-icon.service.ts
+++ b/components/icon/nz-icon.service.ts
@@ -25,9 +25,11 @@ import {
CloseCircleFill,
CloseCircleOutline,
CloseOutline,
+ CopyOutline,
DoubleLeftOutline,
DoubleRightOutline,
DownOutline,
+ EditOutline,
EllipsisOutline,
ExclamationCircleFill,
ExclamationCircleOutline,
@@ -70,9 +72,11 @@ export const NZ_ICONS_USED_BY_ZORRO: IconDefinition[] = [
CloseCircleOutline,
CloseCircleFill,
CloseOutline,
+ CopyOutline,
DoubleLeftOutline,
DoubleRightOutline,
DownOutline,
+ EditOutline,
EllipsisOutline,
ExclamationCircleFill,
ExclamationCircleOutline,
diff --git a/components/input/nz-autosize.directive.ts b/components/input/nz-autosize.directive.ts
index 321fa6a9f2b..5eda45a6bbc 100644
--- a/components/input/nz-autosize.directive.ts
+++ b/components/input/nz-autosize.directive.ts
@@ -144,7 +144,7 @@ export class NzAutosizeDirective implements AfterViewInit, OnDestroy, DoCheck {
textareaClone.style.overflow = 'hidden';
this.el.parentNode!.appendChild(textareaClone);
- this.cachedLineHeight = textareaClone.clientHeight - this.inputGap - 1;
+ this.cachedLineHeight = textareaClone.clientHeight;
this.el.parentNode!.removeChild(textareaClone);
// Min and max heights have to be re-calculated if the cached line height changes
diff --git a/components/ng-zorro-antd.module.ts b/components/ng-zorro-antd.module.ts
index 1bb926c7892..b5e1c7a220d 100644
--- a/components/ng-zorro-antd.module.ts
+++ b/components/ng-zorro-antd.module.ts
@@ -59,6 +59,7 @@ import { NzToolTipModule } from 'ng-zorro-antd/tooltip';
import { NzTransferModule } from 'ng-zorro-antd/transfer';
import { NzTreeModule } from 'ng-zorro-antd/tree';
import { NzTreeSelectModule } from 'ng-zorro-antd/tree-select';
+import { NzTypographyModule } from 'ng-zorro-antd/typography';
import { NzUploadModule } from 'ng-zorro-antd/upload';
export * from 'ng-zorro-antd/affix';
@@ -122,6 +123,7 @@ export * from 'ng-zorro-antd/tooltip';
export * from 'ng-zorro-antd/transfer';
export * from 'ng-zorro-antd/tree-select';
export * from 'ng-zorro-antd/tree';
+export * from 'ng-zorro-antd/typography';
export * from 'ng-zorro-antd/upload';
export * from './version';
@@ -188,7 +190,8 @@ export * from './version';
NzSkeletonModule,
NzStatisticModule,
NzEmptyModule,
- NzDescriptionsModule
+ NzDescriptionsModule,
+ NzTypographyModule
]
})
export class NgZorroAntdModule {
diff --git a/components/typography/demo/basic.md b/components/typography/demo/basic.md
new file mode 100644
index 00000000000..5fb2e9787b5
--- /dev/null
+++ b/components/typography/demo/basic.md
@@ -0,0 +1,14 @@
+---
+order: 0
+title:
+ zh-CN: 基本
+ en-US: Basic
+---
+
+## zh-CN
+
+展示文档样例。
+
+## en-US
+
+Display the document sample.
diff --git a/components/typography/demo/basic.ts b/components/typography/demo/basic.ts
new file mode 100644
index 00000000000..80b615ebe5d
--- /dev/null
+++ b/components/typography/demo/basic.ts
@@ -0,0 +1,78 @@
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'nz-demo-typography-basic',
+ template: `
+
+
Introduction
+
+ In the process of internal desktop applications development, many different design specs and implementations
+ would be involved, which might cause designers and developers difficulties and duplication and reduce the
+ efficiency of development.
+
+
+ After massive project practice and summaries, Ant Design, a design language for backgroundapplications, is
+ refined by Ant UED Team, which aims to uniform the user interface specs for internal
+ background projects, lower the unnecessary cost of design differences and implementation and liberate the
+ resources ofdesign and front-end development.
+
+
Guidelines and Resources
+
+ We supply a series of design principles, practical patterns and high quality design resources
+ (Sketch and
+ Axure), to help people create their product
+ prototypes beautifully and efficiently.
+
+ Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design
+ language for background applications, is refined by Ant UED Team. Ant Design, a design language for background
+ applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by
+ Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a
+ design language for background applications, is refined by Ant UED Team.
+
+
+
+ Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design
+ language for background applications, is refined by Ant UED Team. Ant Design, a design language for background
+ applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by
+ Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a
+ design language for background applications, is refined by Ant UED Team.
+
+
+
+ `,
+ styles: []
+})
+export class NzDemoTypographyEllipsisComponent {
+ dynamicContent = `Ant Design, a design language for background applications, is refined by Ant UED Team.
+Ant Design, a design language for background applications, is refined by Ant UED Team.
+Ant Design, a design language for background applications, is refined by Ant UED Team.`;
+
+ onChange(event: string): void {
+ this.dynamicContent = event;
+ }
+}
diff --git a/components/typography/demo/interactive.md b/components/typography/demo/interactive.md
new file mode 100644
index 00000000000..2e3aee8898b
--- /dev/null
+++ b/components/typography/demo/interactive.md
@@ -0,0 +1,14 @@
+---
+order: 2
+title:
+ zh-CN: 可交互
+ en-US: Interactive
+---
+
+## zh-CN
+
+提供额外的交互能力。
+
+## en-US
+
+Provide additional interactive capacity.
diff --git a/components/typography/demo/interactive.ts b/components/typography/demo/interactive.ts
new file mode 100644
index 00000000000..f97d7d31be5
--- /dev/null
+++ b/components/typography/demo/interactive.ts
@@ -0,0 +1,18 @@
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'nz-demo-typography-interactive',
+ template: `
+
+
+
Replace copy text.
+ `,
+ styles: []
+})
+export class NzDemoTypographyInteractiveComponent {
+ str = 'This is an editable text.';
+
+ onChange(event: string): void {
+ this.str = event;
+ }
+}
diff --git a/components/typography/demo/text.md b/components/typography/demo/text.md
new file mode 100644
index 00000000000..d7b145f18e7
--- /dev/null
+++ b/components/typography/demo/text.md
@@ -0,0 +1,14 @@
+---
+order: 2
+title:
+ zh-CN: 文本组件
+ en-US: Text Component
+---
+
+## zh-CN
+
+内置不同样式的文本。
+
+## en-US
+
+Provides multiple types of text.
diff --git a/components/typography/demo/text.ts b/components/typography/demo/text.ts
new file mode 100644
index 00000000000..3a14708c386
--- /dev/null
+++ b/components/typography/demo/text.ts
@@ -0,0 +1,30 @@
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'nz-demo-typography-text',
+ template: `
+ Ant Design
+
+ Ant Design
+
+ Ant Design
+
+ Ant Design
+
+ Ant Design
+
+ Ant Design
+
+ Ant Design
+
+ Ant Design
+
+ Ant Design
+
+ Ant Design
+ `,
+ styles : []
+})
+export class NzDemoTypographyTextComponent {
+
+}
diff --git a/components/typography/demo/title.md b/components/typography/demo/title.md
new file mode 100644
index 00000000000..1565966d15c
--- /dev/null
+++ b/components/typography/demo/title.md
@@ -0,0 +1,14 @@
+---
+order: 1
+title:
+ zh-CN: 标题组件
+ en-US: Title Component
+---
+
+## zh-CN
+
+展示不同级别的标题。
+
+## en-US
+
+Display title in different level.
diff --git a/components/typography/demo/title.ts b/components/typography/demo/title.ts
new file mode 100644
index 00000000000..bf807657fd7
--- /dev/null
+++ b/components/typography/demo/title.ts
@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'nz-demo-typography-title',
+ template: `
+
Ant Design, a design language for background applications, is refined by Ant UED Team
+ Ant Design
+ Ant Design
+ Ant Design
+ Ant Design
+ Ant Design
+ Ant Design
+ Ant Design
+ Ant Design
+ Ant Design
+ Ant Design
+ `
+})
+export class NzTestTypographyComponent {}
+
+@Component({
+ selector: 'nz-test-typography-copy',
+ template: `
+
+ Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design
+ language for background applications, is refined by Ant UED Team. Ant Design, a design language for background
+ applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by
+ Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a
+ design language for background applications, is refined by Ant UED Team.
+
+
+
+ Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design
+ language for background applications, is refined by Ant UED Team. Ant Design, a design language for background
+ applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by
+ Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a
+ design language for background applications, is refined by Ant UED Team.
+
+
+ `,
+ styles: [
+ `
+ p {
+ line-height: 1.5;
+ }
+ `
+ ]
+})
+export class NzTestTypographyEllipsisComponent {
+ expandable = false;
+ onExpand = jasmine.createSpy('expand callback');
+
+ @ViewChild(NzTypographyComponent, { static: false }) nzTypographyComponent: NzTypographyComponent;
+ str = new Array(5)
+ .fill('Ant Design, a design language for background applications, is refined by Ant UED Team.')
+ .join('');
+}
From 7170597b6d0f8fd9801c5d2d1e373570118a8ef9 Mon Sep 17 00:00:00 2001
From: Hsuan Lee
Date: Tue, 25 Jun 2019 19:03:17 +0800
Subject: [PATCH 06/10] docs: fix API
---
components/typography/doc/index.en-US.md | 2 +-
components/typography/doc/index.zh-CN.md | 2 +-
2 files changed, 2 insertions(+), 2 deletions(-)
diff --git a/components/typography/doc/index.en-US.md b/components/typography/doc/index.en-US.md
index 8fd850ad3dc..1b79c562ab6 100644
--- a/components/typography/doc/index.en-US.md
+++ b/components/typography/doc/index.en-US.md
@@ -27,5 +27,5 @@ Basic text writing, including headings, body text, lists, and more.
| `[nzExpandable]` | Expandable when ellipsis | `boolean` | `false` |
| `[nzEllipsisRows]` | Line number | `number` | `1` |
| `[nzType]` | Content type | `'secondary'|'warning'|'danger'` | - |
-| `(onChange)` | Trigger when user edit the content | `EventEmitter` | - |
+| `(nzChange)` | Trigger when user edit the content | `EventEmitter` | - |
| `(nzExpand)` | Trigger when user expanded the content | `EventEmitter` | - |
\ No newline at end of file
diff --git a/components/typography/doc/index.zh-CN.md b/components/typography/doc/index.zh-CN.md
index c7593cf2f3b..428e59547cb 100644
--- a/components/typography/doc/index.zh-CN.md
+++ b/components/typography/doc/index.zh-CN.md
@@ -27,5 +27,5 @@ cols: 1
| `[nzDisabled]` | 禁用文本 | `boolean` | `false` |
| `[nzEllipsisRows]` | 自动溢出省略时省略行数 | `number` | `1` |
| `[nzType]` | 文本类型 | `'secondary'|'warning'|'danger'` | - |
-| `(onChange)` | 当用户提交编辑内容时触发 | `EventEmitter` | - |
+| `(nzChange)` | 当用户提交编辑内容时触发 | `EventEmitter` | - |
| `(nzExpand)` | 展开省略文本时触发 | `EventEmitter` | - |
From 1609db34ae222f941b96341f5cb047f2168dcc6a Mon Sep 17 00:00:00 2001
From: Hsuan Lee
Date: Wed, 26 Jun 2019 09:58:07 +0800
Subject: [PATCH 07/10] test(module:typography): fix ci test
---
components/typography/nz-typography.spec.ts | 2 ++
1 file changed, 2 insertions(+)
diff --git a/components/typography/nz-typography.spec.ts b/components/typography/nz-typography.spec.ts
index d8b8dd2a32f..88079284e12 100644
--- a/components/typography/nz-typography.spec.ts
+++ b/components/typography/nz-typography.spec.ts
@@ -219,6 +219,8 @@ describe('typography', () => {
fixture.detectChanges();
tick(16);
fixture.detectChanges();
+ tick(16);
+ fixture.detectChanges();
componentElement.querySelectorAll('p').forEach(e => {
expect(e.innerText.includes('...')).toBe(true);
});
From b26fed9d4f4fde683f4337faed966197ea804efc Mon Sep 17 00:00:00 2001
From: Hsuan Lee
Date: Wed, 26 Jun 2019 11:38:28 +0800
Subject: [PATCH 08/10] test(module:typography): fix ci test
---
components/typography/nz-typography.spec.ts | 5 +++--
1 file changed, 3 insertions(+), 2 deletions(-)
diff --git a/components/typography/nz-typography.spec.ts b/components/typography/nz-typography.spec.ts
index 88079284e12..90a8416d10c 100644
--- a/components/typography/nz-typography.spec.ts
+++ b/components/typography/nz-typography.spec.ts
@@ -216,10 +216,11 @@ describe('typography', () => {
it('should resize work', fakeAsync(() => {
testComponent.expandable = true;
- fixture.detectChanges();
+ viewport.set(400, 1000);
+ dispatchFakeEvent(window, 'resize');
tick(16);
fixture.detectChanges();
- tick(16);
+ tick(32);
fixture.detectChanges();
componentElement.querySelectorAll('p').forEach(e => {
expect(e.innerText.includes('...')).toBe(true);
From d603e40628013124c8f5fdcb148d04b914433913 Mon Sep 17 00:00:00 2001
From: Hsuan Lee
Date: Wed, 26 Jun 2019 17:06:45 +0800
Subject: [PATCH 09/10] fix(module:typography): fix ellipsis content
---
components/core/util/text-measure.ts | 3 +-
components/typography/demo/basic.ts | 43 +++++++++++--------
components/typography/demo/ellipsis.ts | 2 +-
components/typography/demo/interactive.ts | 6 +--
components/typography/doc/index.en-US.md | 4 +-
components/typography/doc/index.zh-CN.md | 4 +-
.../typography/nz-typography.component.html | 2 +-
.../typography/nz-typography.component.ts | 12 +++---
components/typography/nz-typography.spec.ts | 16 +++++--
9 files changed, 52 insertions(+), 40 deletions(-)
diff --git a/components/core/util/text-measure.ts b/components/core/util/text-measure.ts
index ac880ae1633..e2dfffeb2a9 100644
--- a/components/core/util/text-measure.ts
+++ b/components/core/util/text-measure.ts
@@ -120,8 +120,9 @@ export function measure(
}
if (inRange()) {
+ const text = ellipsisContainer.innerHTML;
ellipsisContainer.removeChild(container);
- return { contentNodes, text: ellipsisContainer.innerHTML, ellipsis: false };
+ return { contentNodes, text, ellipsis: false };
}
// We should clone the childNode since they're controlled by React and we can't reuse it without warning
diff --git a/components/typography/demo/basic.ts b/components/typography/demo/basic.ts
index 80b615ebe5d..da180660811 100644
--- a/components/typography/demo/basic.ts
+++ b/components/typography/demo/basic.ts
@@ -3,7 +3,7 @@ import { Component } from '@angular/core';
@Component({
selector: 'nz-demo-typography-basic',
template: `
-
+
Introduction
In the process of internal desktop applications development, many different design specs and implementations
@@ -12,16 +12,21 @@ import { Component } from '@angular/core';
After massive project practice and summaries, Ant Design, a design language for backgroundapplications, is
- refined by Ant UED Team, which aims to uniform the user interface specs for internal
- background projects, lower the unnecessary cost of design differences and implementation and liberate the
- resources ofdesign and front-end development.
+ refined by Ant UED Team, which aims to
+ uniform the user interface specs for internal background projects, lower the unnecessary cost of design
+ differences and implementation and liberate the resources ofdesign and front-end development.
Guidelines and Resources
- We supply a series of design principles, practical patterns and high quality design resources
- (Sketch and
- Axure), to help people create their product
- prototypes beautifully and efficiently.
+ We supply a series of design principles, practical patterns and high quality design resources (Sketch
+ and Axure), to help people create their product prototypes beautifully and efficiently.
@@ -44,17 +49,19 @@ import { Component } from '@angular/core';
随着商业化的趋势,越来越多的企业级产品对更好的用户体验有了进一步的要求。带着这样的一个终极目标,我们(蚂蚁金服体验技术部)
- 经过大量的项目实践和总结,逐步打磨出一个服务于企业级产品的设计体系 Ant Design。
- 基于『确定』和『自然』的设计价值观,通过模块化的解决方案,降低冗余的生产成本,
- 让设计者专注于更好的用户体验。
+ 经过大量的项目实践和总结,逐步打磨出一个服务于企业级产品的设计体系 Ant Design。 基于『确定』和『自然』的设计价值观,通过模块化的解决方案,降低冗余的生产成本, 让设计者专注于更好的用户体验。
Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design
language for background applications, is refined by Ant UED Team. Ant Design, a design language for background
applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by
@@ -352,7 +360,7 @@ export class NzTestTypographyEditComponent {
nzEllipsis
[nzExpandable]="expandable"
[nzEllipsisRows]="3"
- (nzExpand)="onExpand()"
+ (nzExpandChange)="onExpand()"
class="multiple"
>
Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design
@@ -366,7 +374,7 @@ export class NzTestTypographyEditComponent {
nzEllipsis
[nzExpandable]="expandable"
[nzEllipsisRows]="2"
- (nzExpand)="onExpand()"
+ (nzExpandChange)="onExpand()"
[nzContent]="str"
class="dynamic"
>