From 24a94490d6676d5ee8eee6bd2507c3ab82e162e8 Mon Sep 17 00:00:00 2001 From: Wendell Date: Wed, 26 Sep 2018 14:36:12 +0800 Subject: [PATCH] add demo --- components/icon/demo/custom.ts | 2 +- components/icon/doc/index.en-US.ts | 0 components/icon/doc/index.zh-CN.ts | 0 components/icon/nz-icon.directive.ts | 64 ++-- components/icon/nz-icon.service.ts | 6 +- components/icon/page/en-US.txt | 9 + components/icon/page/index.ts | 289 ++++++++++++++++++ components/icon/page/zh-CN.txt | 9 + package.json | 2 +- site_scripts/_site/src/app/app.component.ts | 4 +- .../nz-copy-icon/nz-copy-icon.directive.ts | 49 --- .../share/nz-copy-icon/nz-copy-icon.module.ts | 12 - .../_site/src/app/share/share.module.ts | 3 - site_scripts/generate-site.js | 27 +- site_scripts/utils/generate-demo.js | 43 ++- 15 files changed, 410 insertions(+), 109 deletions(-) delete mode 100644 components/icon/doc/index.en-US.ts delete mode 100644 components/icon/doc/index.zh-CN.ts create mode 100644 components/icon/page/en-US.txt create mode 100644 components/icon/page/index.ts create mode 100644 components/icon/page/zh-CN.txt delete mode 100644 site_scripts/_site/src/app/share/nz-copy-icon/nz-copy-icon.directive.ts delete mode 100644 site_scripts/_site/src/app/share/nz-copy-icon/nz-copy-icon.module.ts diff --git a/components/icon/demo/custom.ts b/components/icon/demo/custom.ts index e9d28b2602b..69c2565c4ea 100644 --- a/components/icon/demo/custom.ts +++ b/components/icon/demo/custom.ts @@ -31,4 +31,4 @@ import { Component } from '@angular/core'; ` ] }) export class NzDemoIconCustomComponent { -} \ No newline at end of file +} diff --git a/components/icon/doc/index.en-US.ts b/components/icon/doc/index.en-US.ts deleted file mode 100644 index e69de29bb2d..00000000000 diff --git a/components/icon/doc/index.zh-CN.ts b/components/icon/doc/index.zh-CN.ts deleted file mode 100644 index e69de29bb2d..00000000000 diff --git a/components/icon/nz-icon.directive.ts b/components/icon/nz-icon.directive.ts index c9cf03acdbf..8d3e8a81a41 100644 --- a/components/icon/nz-icon.directive.ts +++ b/components/icon/nz-icon.directive.ts @@ -9,7 +9,7 @@ import { OnInit, Renderer2 } from '@angular/core'; -import { IconDirective } from 'ant-icons-angular'; +import { IconDirective } from '@ant-design/icons-angular'; import { NzIconService } from './nz-icon.service'; /** @@ -27,34 +27,39 @@ export class NzIconDirective extends IconDirective implements OnInit, OnChanges, @Input() iconfont: string; // private _renderer: Renderer2; - private _classObserver: MutationObserver; + private _classNameObserver: MutationObserver; /** * In order to make this directive compatible to old API, we had do some ugly stuff here. * Should be removed in next major version. */ private _classChangeHandler(className: string): void { - const getTypeName = function (): string { - // NOTE: bad case multi space - const iconClass = className.split(/\s/).filter(names => names.indexOf('anticon') === 0 && names !== 'anticon'); - // TODO: remove spin - return iconClass.length ? iconClass[ 0 ].replace('anticon-', '') : ''; - }; + if (!className) { + return; + } + + const classArr = className.split(/\s/); + const hasAnticonTag = className.indexOf('anticon') > -1; + const autoSpin = className.indexOf('anticon-loading') > -1; + let anticonType = classArr.filter(cls => cls !== 'anticon' && cls !== 'anticon-spin' && cls.startsWith('anticon-'))[ 0 ]; - let newType = getTypeName(); - if (!newType) { + if (!hasAnticonTag || !anticonType) { return; + } else { + anticonType = anticonType.replace('anticon-', ''); } + // This is misspelled in old versions... - if (newType.indexOf('verticle') > -1) { + if (anticonType.indexOf('verticle') > -1) { console.error(`'verticle' is misspelled, would be corrected in the next major version.`); - newType = newType.replace('verticle', 'vertical'); + anticonType = anticonType.replace('verticle', 'vertical'); } - if (!newType.endsWith('-o')) { - newType += '-o'; + if (!anticonType.endsWith('-o')) { + anticonType += '-o'; } - if (this.type !== newType) { - this.type = newType; + this.spin = autoSpin || this.spin; + if (this.type !== anticonType) { + this.type = anticonType; this._changeIcon().then(svg => { this._addExtraModifications(svg); }); @@ -77,12 +82,9 @@ export class NzIconDirective extends IconDirective implements OnInit, OnChanges, } constructor(public _iconService: NzIconService, public _elementRef: ElementRef, public _renderer: Renderer2) { - super(_iconService, _elementRef); // NzIconService extends IconService so IconDirective won't complain. + super(_iconService, _elementRef, _renderer); // NzIconService extends IconService so IconDirective won't complain. } - /** - * Override this method to check if the icon need to be spin. - */ ngOnChanges(): void { if (!this.iconfont) { this._changeIcon().then(svg => { @@ -91,6 +93,8 @@ export class NzIconDirective extends IconDirective implements OnInit, OnChanges, } else { this._setSVGElement(this._iconService.createIconfontIcon(`#${this.iconfont}`)); } + + console.log('huh!?') } /** @@ -100,14 +104,13 @@ export class NzIconDirective extends IconDirective implements OnInit, OnChanges, const element = this._elementRef.nativeElement as HTMLElement; if (element && element.className.indexOf('anticon') > -1) { this._warnAPI(); - this._classChangeHandler(element.className); - this._classObserver = new MutationObserver((mutations: MutationRecord[]) => { + this._classChangeHandler(element.className); // In case mutations didn't catch the init status. + this._classNameObserver = new MutationObserver((mutations: MutationRecord[]) => { mutations - .filter((mutation: MutationRecord) => mutation.attributeName === 'class') - // TODO: class list - .forEach((mutation: MutationRecord) => this._classChangeHandler((mutation.target as HTMLElement).className)); + .filter((mutation: MutationRecord) => mutation.attributeName === 'class') + .forEach((mutation: MutationRecord) => this._classChangeHandler((mutation.target as HTMLElement).className)); }); - this._classObserver.observe(this._elementRef.nativeElement, { attributes: true }); + this._classNameObserver.observe(this._elementRef.nativeElement, { attributes: true }); } // this._renderer = this._rendererFactory.createRenderer(null, null); @@ -115,15 +118,18 @@ export class NzIconDirective extends IconDirective implements OnInit, OnChanges, } ngOnDestroy(): void { - if (this._classObserver) { - this._classObserver.disconnect(); + if (this._classNameObserver) { + this._classNameObserver.disconnect(); } } + /** + * If custom content is provided, should try to normalize the svg element. + */ ngAfterContentChecked(): void { const children = (this._elementRef.nativeElement as HTMLElement).children; if (children && children.length && !this.type) { - const child = children[0]; + const child = children[ 0 ]; this._iconService.normalizeSvgElement(child as SVGElement); } } diff --git a/components/icon/nz-icon.service.ts b/components/icon/nz-icon.service.ts index f3268c298a9..aa01a8b1e3f 100644 --- a/components/icon/nz-icon.service.ts +++ b/components/icon/nz-icon.service.ts @@ -1,7 +1,7 @@ import { DOCUMENT } from '@angular/common'; import { HttpClient } from '@angular/common/http'; import { Inject, Injectable, Optional, RendererFactory2 } from '@angular/core'; -import { IconService } from 'ant-icons-angular'; +import { IconService } from '@ant-design/icons-angular'; export interface NzIconfontOption { scriptUrl: string; @@ -54,5 +54,9 @@ export class NzIconService extends IconService { @Optional() @Inject(DOCUMENT) protected _document: any ) { super(_rendererFactory, _http, _document); + + // TODO: Register icons that NG-ZORRO use inside other components here. + const innerZorroIcons = [ ]; + // this._addIconLiteral(); } } diff --git a/components/icon/page/en-US.txt b/components/icon/page/en-US.txt new file mode 100644 index 00000000000..1cca1b67df1 --- /dev/null +++ b/components/icon/page/en-US.txt @@ -0,0 +1,9 @@ +{ + chooseTheme: 'Select the Icon Theme', + direction: 'Directional Icons', + suggestion: 'Suggested Icons', + edit: 'Editor Icons', + data: 'Data Icons', + other: 'Application Icons', + logo: 'Brand and Logos' +} \ No newline at end of file diff --git a/components/icon/page/index.ts b/components/icon/page/index.ts new file mode 100644 index 00000000000..d26ac2b0a72 --- /dev/null +++ b/components/icon/page/index.ts @@ -0,0 +1,289 @@ +import { DOCUMENT } from '@angular/common'; +import { ChangeDetectionStrategy, Component, Inject, OnInit } from '@angular/core'; +import { StringifyIconDefinition, ThemeType } from '@ant-design/icons-angular'; +import manifest from '@ant-design/icons/lib/manifest'; +import { NzIconService } from 'ng-zorro-antd'; + +const outlineIcon: StringifyIconDefinition = { + name : 'outline', + theme: 'outline', + icon : '' +}; +const twoToneIcon: StringifyIconDefinition = { + name : 'twotone', + theme: 'twotone', + icon : '' +}; + +const fillIcon: StringifyIconDefinition = { + name : 'fill', + theme: 'fill', + icon : '' +}; + +const categories = { + direction : [ + 'step-backward', 'step-forward', 'fast-backward', + 'fast-forward', 'shrink', 'arrows-alt', 'down', 'up', 'left', + 'right', 'caret-up', 'caret-down', 'caret-left', 'caret-right', + 'up-circle', 'down-circle', 'left-circle', 'right-circle', + 'double-right', 'double-left', 'vertical-left', 'vertical-right', + 'forward', 'backward', 'rollback', 'enter', 'retweet', + 'swap', 'swap-left', 'swap-right', 'arrow-up', 'arrow-down', + 'arrow-left', 'arrow-right', 'play-circle', + 'up-square', 'down-square', 'left-square', 'right-square', + 'login', 'logout', 'menu-fold', 'menu-unfold', + 'border-bottom', 'border-horizontal', 'border-inner', + 'border-left', 'border-right', 'border-top', + 'border-verticle', 'pic-center', 'pic-left', 'pic-right', + 'radius-bottomleft', 'radius-bottomright', 'radius-upleft', + 'fullscreen', 'fullscreen-exit' + ], + suggestion: [ + 'question', 'question-circle', + 'plus', 'plus-circle', 'pause', + 'pause-circle', 'minus', + 'minus-circle', 'plus-square', 'minus-square', + 'info', 'info-circle', + 'exclamation', 'exclamation-circle', + 'close', 'close-circle', 'close-square', + 'check', 'check-circle', + 'check-square', + 'clock-circle', 'warning', + 'issues-close', 'stop' + ], + edit : [ + 'edit', 'form', 'copy', 'scissor', 'delete', 'snippets', 'diff', 'highlight', + 'align-center', 'align-left', 'align-right', 'bg-colors', + 'bold', 'italic', 'underline', + 'strikethrough', 'redo', 'undo', 'zoom-in', 'zoom-out', + 'font-colors', 'font-size', 'line-height', 'colum-height', + 'dash', 'small-dash', 'sort-ascending', 'sort-descending', + 'drag', 'ordered-list', 'radius-setting' + ], + data : [ + 'area-chart', 'pie-chart', 'bar-chart', 'dot-chart', 'line-chart', + 'radar-chart', 'heat-map', 'fall', 'rise', 'stock', 'box-plot', 'fund', + 'sliders' + ], + other : [ + 'lock', 'unlock', 'bars', 'book', 'calendar', 'cloud', 'cloud-download', + 'code', 'copy', 'credit-card', 'delete', 'desktop', + 'download', 'ellipsis', 'file', 'file-text', + 'file-unknown', 'file-pdf', 'file-word', 'file-excel', + 'file-jpg', 'file-ppt', 'file-markdown', 'file-add', + 'folder', 'folder-open', 'folder-add', 'hdd', 'frown', + 'meh', 'smile', 'inbox', + 'laptop', 'appstore', 'link', + 'mail', 'mobile', 'notification', 'paper-clip', 'picture', + 'poweroff', 'reload', 'search', 'setting', 'share-alt', + 'shopping-cart', 'tablet', 'tag', 'tags', + 'to-top', 'upload', 'user', 'video-camera', + 'home', 'loading', 'loading-3-quarters', + 'cloud-upload', + 'star', 'heart', 'environment', + 'eye', 'camera', 'save', 'team', + 'solution', 'phone', 'filter', 'exception', 'export', + 'customer-service', 'qrcode', 'scan', 'like', + 'dislike', 'message', 'pay-circle', + 'calculator', 'pushpin', + 'bulb', 'select', 'switcher', 'rocket', 'bell', 'disconnect', + 'database', 'compass', 'barcode', 'hourglass', 'key', + 'flag', 'layout', 'printer', 'sound', 'usb', 'skin', 'tool', + 'sync', 'wifi', 'car', 'schedule', 'user-add', 'user-delete', + 'usergroup-add', 'usergroup-delete', 'man', 'woman', 'shop', + 'gift', 'idcard', 'medicine-box', 'red-envelope', 'coffee', + 'copyright', 'trademark', 'safety', 'wallet', 'bank', 'trophy', + 'contacts', 'global', 'shake', 'api', 'fork', 'dashboard', + 'table', 'profile', + 'alert', 'audit', 'branches', + 'build', 'border', 'crown', + 'experiment', 'fire', + 'money-collect', 'property-safety', 'read', 'reconciliation', + 'rest', 'security-scan', 'insurance', 'interation', 'safety-certificate', + 'project', 'thunderbolt', 'block', 'cluster', 'deployment-unit', + 'dollar', 'euro', 'pound', 'file-done', 'file-exclamation', 'file-protect', + 'file-search', 'file-sync', 'gateway', 'gold', 'robot', 'shopping' + ], + logo : [ + 'android', 'apple', 'windows', + 'ie', 'chrome', 'github', 'aliwangwang', + 'dingding', + 'weibo-square', 'weibo-circle', 'taobao-circle', 'html5', + 'weibo', 'twitter', 'wechat', 'youtube', 'alipay-circle', + 'taobao', 'skype', 'qq', 'medium-workmark', 'gitlab', 'medium', + 'linkedin', 'google-plus', 'dropbox', 'facebook', 'codepen', + 'amazon', 'google', 'codepen-circle', 'alipay', 'ant-design', + 'aliyun', 'zhihu', 'slack', 'slack-square', 'behance', + 'behance-square', 'dribbble', 'dribbble-square', + 'instagram', 'yuque', + 'alibaba', 'yahoo' + ] +}; + +const newIconNames: string[] = [ + // direction + 'border-bottom', 'border-horizontal', 'border-inner', + 'border-outter', 'border-left', 'border-right', 'border-top', + 'border-verticle', 'pic-center', 'pic-left', 'pic-right', + 'radius-bottomleft', 'radius-bottomright', 'radius-upleft', 'radius-upleft', + 'fullscreen', 'fullscreen-exit', + // suggestion + 'issues-close', 'stop', + + // edit + 'scissor', 'snippets', 'diff', 'highlight', + 'align-center', 'align-left', 'align-right', 'bg-colors', + 'bold', 'italic', 'underline', 'redo', 'undo', 'zoom-in', 'zoom-out', + 'font-colors', 'font-size', 'line-height', 'colum-height', 'colum-width', + 'dash', 'small-dash', 'sort-ascending', 'sort-descending', + 'drag', 'ordered-list', 'radius-setting', + + // data + 'radar-chart', 'heat-map', 'fall', 'rise', 'stock', 'box-plot', 'fund', + 'sliders', + + // other + 'alert', 'audit', 'batch-folding', 'branches', + 'build', 'border', 'crown', + 'experiment', 'fire', + 'money-collect', 'property-safety', 'read', 'reconciliation', + 'rest', 'security-scan', 'insurance', 'interation', 'safety-certificate', + 'project', 'thunderbolt', 'block', 'cluster', 'deployment-unit', + 'dollar', 'euro', 'pound', 'file-done', 'file-exclamation', 'file-protect', + 'file-search', 'file-sync', 'gateway', 'gold', 'robot', + 'strikethrough', 'shopping', + + // logo + 'alibaba', 'yahoo' +]; + +@Component({ + changeDetection: ChangeDetectionStrategy.OnPush, + selector: 'nz-page-demo-icon', + template: ` +

{{localeObj.chooseTheme}}

+ + + + + + +

{{ localeObj[category] }}

+ + + `, + styles : [ + `h3 { + margin: 1.6em 0 0.6em; + font-size: 18px; + }`, + `ul.anticons-list li .anticon { + font-size: 36px; + }` + ] +}) +export class NzPageDemoIconComponent implements OnInit { + renderContext = { + displayedNames: {}, + categoryNames : [], + currentTheme : 'outline' + }; + localeObj = locale; + + trackByFn = (index: number, item: string) => { + return `${item}-${this.renderContext.currentTheme}`; + } + + isNewIcon = (name) => { + return newIconNames.indexOf(name) > -1; + } + + onIconClick(e: MouseEvent, icon: string): void { + const target = e.target as HTMLElement; + const copiedString = ``; + target.classList.add('copied'); + this.copy(copiedString).then(() => { + setTimeout(() => { + target.classList.remove('copied'); + }, 1000); + }); + } + + copy(value: string): Promise { + const promise = new Promise((resolve, reject): void => { + let copyTextArea = null as HTMLTextAreaElement; + try { + copyTextArea = this.dom.createElement('textarea'); + copyTextArea.style.height = '0px'; + copyTextArea.style.opacity = '0'; + copyTextArea.style.width = '0px'; + this.dom.body.appendChild(copyTextArea); + copyTextArea.value = value; + copyTextArea.select(); + this.dom.execCommand('copy'); + resolve(value); + } finally { + if (copyTextArea && copyTextArea.parentNode) { + copyTextArea.parentNode.removeChild(copyTextArea); + } + } + } + ); + + return (promise); + + } + + private setIconsShouldBeDisplayed(value: ThemeType): void { + const names = Object.keys(categories) + .map(category => ({ + name : category, + icons: categories[ category ].filter(name => manifest[ value ].indexOf(name) > -1) + })) + .filter(({ icons }) => Boolean(icons.length)); + + this.renderContext = { + displayedNames: names, + categoryNames : names.map(({ name, icons }) => name), + currentTheme : value + }; + } + + constructor(@Inject(DOCUMENT) private dom: any) { + } + + ngOnInit() { + this.setIconsShouldBeDisplayed('outline'); + } +} diff --git a/components/icon/page/zh-CN.txt b/components/icon/page/zh-CN.txt new file mode 100644 index 00000000000..a84e0e0bdd4 --- /dev/null +++ b/components/icon/page/zh-CN.txt @@ -0,0 +1,9 @@ +{ + chooseTheme: '选择图标主题风格', + direction: '方向性图标', + suggestion: '提示建议性图标', + edit: '编辑类图标', + data: '数据类图标', + other: '网站通用图标', + logo: '品牌和标识' +} \ No newline at end of file diff --git a/package.json b/package.json index 5f9069b1873..130254e5a14 100644 --- a/package.json +++ b/package.json @@ -31,7 +31,7 @@ }, "dependencies": { "@angular/cdk": "^6.0.0", - "ant-icons-angular": "file:../ant-design-icons/packages/icons-angular/dist/ant-icons-angular/ant-icons-angular-0.0.1.tgz", + "@ant-design/icons-angular": "file:../ant-design-icons/packages/icons-angular/dist/ant-icons-angular/ant-design-icons-angular-0.0.1.tgz", "date-fns": "^1.29.0" }, "devDependencies": { diff --git a/site_scripts/_site/src/app/app.component.ts b/site_scripts/_site/src/app/app.component.ts index b1c75df9eb5..fa930eee74e 100644 --- a/site_scripts/_site/src/app/app.component.ts +++ b/site_scripts/_site/src/app/app.component.ts @@ -1,8 +1,8 @@ import { AfterViewInit, Component, ElementRef, HostListener, OnInit, ViewChild } from '@angular/core'; import { Title } from '@angular/platform-browser'; import { NavigationEnd, Router } from '@angular/router'; -import { IconDefinition } from 'ant-icons-angular'; -import * as AllIcons from 'ant-icons-angular/icons'; +import { IconDefinition } from '@ant-design/icons-angular'; +import * as AllIcons from '@ant-design/icons-angular/icons'; import { en_US, zh_CN, NzI18nService, NzIconService, NzMessageService } from 'ng-zorro-antd'; import { environment } from '../environments/environment'; import { ROUTER_LIST } from './router'; diff --git a/site_scripts/_site/src/app/share/nz-copy-icon/nz-copy-icon.directive.ts b/site_scripts/_site/src/app/share/nz-copy-icon/nz-copy-icon.directive.ts deleted file mode 100644 index 034b621e17e..00000000000 --- a/site_scripts/_site/src/app/share/nz-copy-icon/nz-copy-icon.directive.ts +++ /dev/null @@ -1,49 +0,0 @@ -import { Directive, HostListener, Inject } from '@angular/core'; -import { DOCUMENT } from '@angular/common'; - -@Directive({ - selector: 'ul.anticons-list' -}) -export class NzCopyIconDirective { - @HostListener('click', [ '$event' ]) - onClick(e: MouseEvent): void { - const target = e.target as HTMLElement; - target.classList.add('copied'); - this.copy(target.querySelector('i').outerHTML).then(() => { - setTimeout(() => { - target.classList.remove('copied'); - }, 1000); - }); - } - - copy(value: string): Promise { - - const promise = new Promise( - (resolve, reject): void => { - let copyTextArea = null as HTMLTextAreaElement; - try { - copyTextArea = this.dom.createElement('textarea'); - copyTextArea.style.height = '0px'; - copyTextArea.style.opacity = '0'; - copyTextArea.style.width = '0px'; - this.dom.body.appendChild(copyTextArea); - copyTextArea.value = value; - copyTextArea.select(); - this.dom.execCommand('copy'); - resolve(value); - } finally { - if (copyTextArea && copyTextArea.parentNode) { - copyTextArea.parentNode.removeChild(copyTextArea); - } - } - } - ); - - return (promise); - - } - - constructor(@Inject(DOCUMENT) private dom: any) { - - } -} diff --git a/site_scripts/_site/src/app/share/nz-copy-icon/nz-copy-icon.module.ts b/site_scripts/_site/src/app/share/nz-copy-icon/nz-copy-icon.module.ts deleted file mode 100644 index 0ec1f45a522..00000000000 --- a/site_scripts/_site/src/app/share/nz-copy-icon/nz-copy-icon.module.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { CommonModule } from '@angular/common'; -import { NgModule } from '@angular/core'; -import { NzCopyIconDirective } from './nz-copy-icon.directive'; - -@NgModule({ - imports : [ CommonModule ], - declarations: [ NzCopyIconDirective ], - exports : [ NzCopyIconDirective ] -}) -export class NzCopyIconModule { - -} diff --git a/site_scripts/_site/src/app/share/share.module.ts b/site_scripts/_site/src/app/share/share.module.ts index 64ae931e305..42bb58d89be 100644 --- a/site_scripts/_site/src/app/share/share.module.ts +++ b/site_scripts/_site/src/app/share/share.module.ts @@ -9,7 +9,6 @@ import { InfiniteScrollModule } from 'ngx-infinite-scroll'; import { ColorSketchModule } from 'ngx-color/sketch'; import { NzCodeBoxModule } from './nz-codebox/nz-codebox.module'; -import { NzCopyIconModule } from './nz-copy-icon/nz-copy-icon.module'; import { NzHighlightModule } from './nz-highlight/nz-highlight.module'; import { NzNavBottomModule } from './nz-nav-bottom/nz-nav-bottom.module'; @@ -23,7 +22,6 @@ import { NzNavBottomModule } from './nz-nav-bottom/nz-nav-bottom.module'; NzCodeBoxModule, NzHighlightModule, NzNavBottomModule, - NzCopyIconModule, // third libs ColorSketchModule ], @@ -36,7 +34,6 @@ import { NzNavBottomModule } from './nz-nav-bottom/nz-nav-bottom.module'; NzCodeBoxModule, NzHighlightModule, NzNavBottomModule, - NzCopyIconModule, // third libs InfiniteScrollModule, ColorSketchModule, diff --git a/site_scripts/generate-site.js b/site_scripts/generate-site.js index 7c291754973..e2f0d850f18 100644 --- a/site_scripts/generate-site.js +++ b/site_scripts/generate-site.js @@ -64,12 +64,37 @@ rootDir.forEach(componentName => { } }); } + + // 处理components->${component}->page文件夹, 这是在代码演示之前的页面级别的 demo + let pageDemo = ''; + const pageDirPath = path.join(componentDirPath, 'page'); + if (fs.existsSync(pageDirPath)) { + const pageDir = fs.readdirSync(pageDirPath); + let zhLocale = ''; + let enLocale = ''; + pageDemo = {}; + pageDir.forEach(file => { + if (/.ts$/.test(file)) { + pageDemo.raw = String(fs.readFileSync(path.join(pageDirPath, file))); + } + if (/^zh-CN.txt$/.test(file)) { + zhLocale = String(fs.readFileSync(path.join(pageDirPath, file))); + } + if (/^en-US.txt$/.test(file)) { + enLocale = String(fs.readFileSync(path.join(pageDirPath, file))); + } + }); + pageDemo.enCode = pageDemo.raw.replace(/locale;/g, enLocale); + pageDemo.zhCode = pageDemo.raw.replace(/locale;/g, zhLocale); + } + // 处理components->${component}->doc文件夹 const result = { name : componentName, docZh : parseDocMdUtil(fs.readFileSync(path.join(componentDirPath, 'doc/index.zh-CN.md')), `components/${componentName}/doc/index.zh-CN.md`), docEn : parseDocMdUtil(fs.readFileSync(path.join(componentDirPath, 'doc/index.en-US.md')), `components/${componentName}/doc/index.en-US.md`), - demoMap: demoMap + demoMap, + pageDemo }; componentsMap[componentName] = result.docZh.meta; diff --git a/site_scripts/utils/generate-demo.js b/site_scripts/utils/generate-demo.js index 15d829c0df7..321c55f100e 100644 --- a/site_scripts/utils/generate-demo.js +++ b/site_scripts/utils/generate-demo.js @@ -3,7 +3,13 @@ const fs = require('fs'); const capitalizeFirstLetter = require('./capitalize-first-letter'); const camelCase = require('./camelcase'); const PrismAngular = require('./angular-language-marked'); + module.exports = function (showCaseComponentPath, result) { + if (result.pageDemo) { + const pageDemoComponent = generatePageDemoComponent(result); + fs.writeFileSync(path.join(showCaseComponentPath, `zh.page.component.ts`), pageDemoComponent.zh); + fs.writeFileSync(path.join(showCaseComponentPath, `en.page.component.ts`), pageDemoComponent.en); + } const demoTemplate = generateTemplate(result); fs.writeFileSync(path.join(showCaseComponentPath, `zh.html`), demoTemplate.zh); fs.writeFileSync(path.join(showCaseComponentPath, `en.html`), demoTemplate.en); @@ -33,6 +39,12 @@ function generateDemoModule(content) { imports += `import { NzDemo${componentName(component)}EnComponent } from './en.component';\n`; declarations += `\t\tNzDemo${componentName(component)}ZhComponent,\n`; declarations += `\t\tNzDemo${componentName(component)}EnComponent,\n`; + if (content.pageDemo) { + imports += `import { NzPageDemo${componentName(component)}ZhComponent } from './zh.page.component';\n`; + imports += `import { NzPageDemo${componentName(component)}EnComponent } from './en.page.component';\n`; + declarations += `\t\tNzPageDemo${componentName(component)}ZhComponent,\n`; + declarations += `\t\tNzPageDemo${componentName(component)}EnComponent,\n`; + } return demoModuleTemplate.replace(/{{imports}}/g, imports).replace(/{{declarations}}/g, declarations).replace(/{{component}}/g, componentName(component)).replace(/{{entryComponents}}/g, entryComponents.join(',\n')); } @@ -44,6 +56,21 @@ function generateComponentName(component, language) { return `NzDemo${componentName(component)}${capitalizeFirstLetter(language)}Component` } +function generatePageDemoComponent(content) { + const component = content.name; + let zhOutput = content.pageDemo.zhCode; + let enOutput = content.pageDemo.enCode; + zhOutput = zhOutput + .replace(`NzPageDemo${componentName(component)}Component`, `NzPageDemo${componentName(component)}ZhComponent`) + .replace(`nz-page-demo-${component}`, `nz-page-demo-${component}-zh`); + enOutput = enOutput + .replace(`NzPageDemo${componentName(component)}Component`, `NzPageDemo${componentName(component)}EnComponent`) + .replace(`nz-page-demo-${component}`, `nz-page-demo-${component}-en`); + return { + en: enOutput, + zh: zhOutput, + } +} function generateDemoComponent(content) { const demoComponentTemplate = String(fs.readFileSync(path.resolve(__dirname, '../template/demo-component.template.ts'))); @@ -74,21 +101,16 @@ function generateDemoComponent(content) { function generateTemplate(result) { const generateTitle = require('./generate.title'); - let zhCode = ''; - let enCode = ''; - for (const key in result.demoMap) { - zhCode += result.demoMap[key].zhCode; - enCode += result.demoMap[key].enCode; - } const innerMap = generateExample(result); - const titleMap = { zh: generateTitle(result.docZh.meta.title, result.docZh.meta.subtitle, result.docZh.path), en: generateTitle(result.docEn.meta.title, '', result.docEn.path) }; + const name = result.name; + const hasPageDemo = !!result.pageDemo; return { - zh: wrapperAll(generateToc('zh-CN', result.name, result.demoMap), wrapperHeader(titleMap.zh, result.docZh.whenToUse, 'zh', innerMap.zh) + wrapperAPI(result.docZh.api)), - en: wrapperAll(generateToc('en-US', result.name, result.demoMap), wrapperHeader(titleMap.en, result.docEn.whenToUse, 'en', innerMap.en) + wrapperAPI(result.docEn.api)) + zh: wrapperAll(generateToc('zh-CN', result.name, result.demoMap), wrapperHeader(titleMap.zh, result.docZh.whenToUse, 'zh', innerMap.zh, hasPageDemo, name) + wrapperAPI(result.docZh.api)), + en: wrapperAll(generateToc('en-US', result.name, result.demoMap), wrapperHeader(titleMap.en, result.docEn.whenToUse, 'en', innerMap.en, hasPageDemo, name) + wrapperAPI(result.docEn.api)) } }; @@ -96,13 +118,14 @@ function wrapperAPI(content) { return `
${content}
` } -function wrapperHeader(title, whenToUse, language, example) { +function wrapperHeader(title, whenToUse, language, example, hasPageDemo, name) { if (example) { return `
${title}
${whenToUse}
+ ${hasPageDemo ? `
` : ''}

${language === 'zh' ? '代码演示' : 'Examples'}