diff --git a/README.md b/README.md index a247aafa..e847dd38 100755 --- a/README.md +++ b/README.md @@ -23,7 +23,7 @@ To see more in [devui.design](https://devui.design/home). ## Angular Support -Now supports Angular `^17.0.0` +Now supports Angular `^18.0.0` ## Getting Started diff --git a/README_zh_CN.md b/README_zh_CN.md index da3aabc2..a4e95f45 100644 --- a/README_zh_CN.md +++ b/README_zh_CN.md @@ -23,7 +23,7 @@ DevUI Design设计系统包含了DevUI规则、设计语言和最佳实践的资 ## Angular版本 -当前支持的angular版本`^17.0.0` +当前支持的angular版本`^18.0.0` ## 快速开始 diff --git a/devui-commons/src/constant.ts b/devui-commons/src/constant.ts new file mode 100644 index 00000000..a897d6be --- /dev/null +++ b/devui-commons/src/constant.ts @@ -0,0 +1,6 @@ +export const LinkMap: Record = { + codesandbox: 'https://codesandbox.io/api/v1/sandboxes/define?module=/src/app/app.component.ts', + versionRelease: 'https://github.com/DevCloudFE/ng-devui/releases', + gitcodeLink: 'https://gitcode.com/DevCloudFE', + vueDevuiLink: 'https://vue-devui.github.io', +}; diff --git a/devui-commons/src/header/header.component.html b/devui-commons/src/header/header.component.html index fa91a9f9..9cf09ac8 100644 --- a/devui-commons/src/header/header.component.html +++ b/devui-commons/src/header/header.component.html @@ -47,6 +47,13 @@
+
+ + + + + +
diff --git a/devui-commons/src/header/header.component.ts b/devui-commons/src/header/header.component.ts index 6f4f4a6b..13e2760d 100644 --- a/devui-commons/src/header/header.component.ts +++ b/devui-commons/src/header/header.component.ts @@ -4,6 +4,7 @@ import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser'; import { DevuiCommonsService } from '../devui-commons.service'; import { I18nUtil } from '../i18n/i18n.util'; import { LogoComponent } from './logo/logo.component'; +import { LinkMap } from '../constant'; @Component({ selector: 'd-common-header', @@ -21,6 +22,7 @@ export class HeaderComponent implements OnInit { repoLink!: SafeResourceUrl; githubLink; + gitcodeLink = LinkMap.gitcodeLink; @ContentChildren(LogoComponent) subLogo: QueryList = new QueryList(); @@ -130,4 +132,4 @@ export class HeaderComponent implements OnInit { this.showHamburger = !this.showHamburger; this.cdr.detectChanges(); } -} \ No newline at end of file +} diff --git a/devui-commons/src/header/menu/menu.component.ts b/devui-commons/src/header/menu/menu.component.ts index eb7d79b4..4d74e89a 100644 --- a/devui-commons/src/header/menu/menu.component.ts +++ b/devui-commons/src/header/menu/menu.component.ts @@ -3,6 +3,7 @@ import { Component, EventEmitter, Input, OnInit, Output, Inject, ChangeDetectorR import { DevuiCommonsService } from '../../devui-commons.service'; import { I18nUtil } from '../../i18n/i18n.util'; import { componentSvg, designSvg, ecologySvg, logoSvg, vueDevUISvg } from './icon'; +import { LinkMap } from 'devui-commons/src/constant'; @Component({ selector: "d-header-menu", @@ -45,7 +46,7 @@ export class MenuComponent implements OnInit { enDescription: "Cross-End component library based on Vue3 and DevUI design style", enName: "Vue DevUI", - href: "https://vue-devui.github.io/", + href: LinkMap.vueDevuiLink, icon: vueDevUISvg, menuName: "vue", }, @@ -123,4 +124,4 @@ export class MenuComponent implements OnInit { changeLanguage(lang): void { this.curLanguage = lang; } -} \ No newline at end of file +} diff --git a/devui-commons/src/header/theme-picker/theme-picker.component.ts b/devui-commons/src/header/theme-picker/theme-picker.component.ts index ca4b46d1..f63cbfd0 100644 --- a/devui-commons/src/header/theme-picker/theme-picker.component.ts +++ b/devui-commons/src/header/theme-picker/theme-picker.component.ts @@ -39,9 +39,9 @@ export class ThemePickerComponent implements OnInit, OnDestroy { ngOnInit() { if (typeof window !== 'undefined') { - this.themeService = window['devuiThemeService']; - this.themes = window['devuiThemes']; - this.theme = window['devuiCurrentTheme']; + this.themeService = (window as any).devuiThemeService; + this.themes = (window as any).devuiThemes; + this.theme = (window as any).devuiCurrentTheme; } const themeName = localStorage.getItem('user-custom-theme')?.split('-')[0]; this.currentAdvancedTheme = this.advancedThemeList.find(theme => theme.value === themeName) ? themeName : 'infinity'; @@ -115,7 +115,7 @@ export class ThemePickerComponent implements OnInit, OnDestroy { themeFontSizeChange() { if (typeof window !== 'undefined' && this.largeFontSizeMode) { - this.largeFontTheme.data = { ...this.themes[window['devuiCurrentTheme']].data, ...LargeFontSize}; + this.largeFontTheme.data = { ...this.themes[(window as any).devuiCurrentTheme].data, ...LargeFontSize}; this.theme = `devui-large-font-theme`; } else { this.theme = `${this.themePrefix}-${this.themeMode}-theme`; diff --git a/devui-commons/src/sidebar/sidebar.component.ts b/devui-commons/src/sidebar/sidebar.component.ts index 14e65325..b4215cd9 100644 --- a/devui-commons/src/sidebar/sidebar.component.ts +++ b/devui-commons/src/sidebar/sidebar.component.ts @@ -5,6 +5,7 @@ import { Subject } from 'rxjs'; import { filter, takeUntil } from 'rxjs/operators'; import { DevuiCommonsService } from '../devui-commons.service'; import { I18nUtil } from '../i18n/i18n.util'; +import { LinkMap } from '../constant'; interface navItem { name: string; @@ -70,7 +71,7 @@ export class SidebarComponent implements OnInit, AfterViewInit, OnDestroy { } rotateDegrees = 0; docLinkMap = { - 'opensource': 'https://github.com/DevCloudFE/ng-devui/releases', + 'opensource': LinkMap.versionRelease, }; get navData() { return this._navData; @@ -86,7 +87,7 @@ export class SidebarComponent implements OnInit, AfterViewInit, OnDestroy { this.commonsService.on('searchEvent').subscribe((term) => { this.filterData(term); }); - this.changelogLink = this.docLinkMap['opensource']; + this.changelogLink = this.docLinkMap.opensource; if(this.showVersions){ this.currentOption = this.versionOptions[0]; } diff --git a/devui/accordion/accordion-item-routerlink.component.ts b/devui/accordion/accordion-item-routerlink.component.ts index 95797e42..bbf32b87 100644 --- a/devui/accordion/accordion-item-routerlink.component.ts +++ b/devui/accordion/accordion-item-routerlink.component.ts @@ -46,7 +46,7 @@ export class AccordionItemRouterlinkComponent extends AccordionBaseLinkComponent } ngOnChanges(changes: SimpleChanges): void { - if (changes['item']) { + if (changes.item) { if (this.link) { this.urlTree = this.router.parseUrl(this.link); const handelPath = (url: string) => { diff --git a/devui/accordion/accordion-item.component.html b/devui/accordion/accordion-item.component.html index e0776759..eb599198 100644 --- a/devui/accordion/accordion-item.component.html +++ b/devui/accordion/accordion-item.component.html @@ -1,4 +1,3 @@ -
{{ title }} diff --git a/devui/accordion/accordion-menu.component.html b/devui/accordion/accordion-menu.component.html index e978e0f6..5bda88a9 100644 --- a/devui/accordion/accordion-menu.component.html +++ b/devui/accordion/accordion-menu.component.html @@ -29,8 +29,8 @@ > diff --git a/devui/accordion/accordion.component.scss b/devui/accordion/accordion.component.scss index 165cb637..aae409de 100755 --- a/devui/accordion/accordion.component.scss +++ b/devui/accordion/accordion.component.scss @@ -48,11 +48,13 @@ :host ::ng-deep .devui-accordion-item-title { display: block; height: 40px; - width: 100%; - padding: 0 12px 0 20px; + width: calc(100% - 24px); + margin: 0 12px; + padding: 0 8px; font-weight: normal; line-height: 40px; color: $devui-text-weak; + border-radius: $devui-border-radius; background: transparent; cursor: pointer; @@ -125,6 +127,8 @@ width: 16px; height: 16px; line-height: 16px; + transform: rotate(-90deg); + transform-origin: center; transition: transform $devui-animation-duration-slow $devui-animation-ease-in-out-smooth; & > svg { @@ -146,8 +150,7 @@ } &.open > .devui-accordion-open-icon { - transform: rotate(180deg); - transform-origin: center; + transform: none; } &.disabled > .devui-accordion-open-icon { @@ -172,97 +175,10 @@ /* 视觉融合灰线 */ :host ::ng-deep .devui-accordion-item-title { position: relative; - - .devui-accordion-splitter { - position: absolute; - display: inline-block; - left: 10px; - width: 2px; - height: 40px; - border-left: 2px solid $devui-dividing-line; - vertical-align: middle; - - &.devui-parent-list { - border: transparent; - } - } - - .devui-accordion-splitter::before { - content: ''; - display: block; - width: 2px; - height: 18px; - border-left: 2px solid $devui-form-control-line-active; - position: absolute; - top: 11px; - left: -2px; - opacity: 0; - } - - &.devui-router-active, - &.active { - &:not(.open) .devui-accordion-splitter::before { - opacity: 1; - } - } } :host ::ng-deep .devui-accordion-show-animate .devui-accordion-item-title { transition: font-weight $devui-animation-duration-fast $devui-animation-ease-in-out-smooth, background-color $devui-animation-duration-fast $devui-animation-ease-in-out-smooth; - - .devui-accordion-splitter::before { - transform: scaleY(0); - transition: transform $devui-animation-duration-slow $devui-animation-ease-in-out-smooth; - } - - &.devui-router-active, - &.active { - &:not(.open) .devui-accordion-splitter::before { - transform: scaleY(1); - } - } -} - -:host ::ng-deep .devui-accordion-list > .devui-accordion-item:first-child { - & > .devui-accordion-item-title, - & > .devui-accordion-menu-item > .devui-accordion-item-title { - & > a > .devui-accordion-splitter, - & > .devui-accordion-splitter { - height: 28px; - top: 12px; - - &::before { - top: 0; - } - } - } -} - -:host ::ng-deep .devui-accordion-list > .devui-accordion-item:last-child { - & > .devui-accordion-item-title, - & > .devui-accordion-menu-item > .devui-accordion-item-title { - & > a > .devui-accordion-splitter, - & > .devui-accordion-splitter { - height: 28px; - top: 0; - - &::before { - top: initial; - bottom: 0; - } - } - } -} - -:host ::ng-deep .devui-accordion-list > .devui-accordion-item:last-child:first-child { - & > .devui-accordion-item-title, - & > .devui-accordion-menu-item > .devui-accordion-item-title { - & > a > .devui-accordion-splitter, - & > .devui-accordion-splitter { - height: 18px; - top: 11px; - } - } } diff --git a/devui/accordion/accordion.component.ts b/devui/accordion/accordion.component.ts index f23b8bb6..0ec60de8 100755 --- a/devui/accordion/accordion.component.ts +++ b/devui/accordion/accordion.component.ts @@ -8,7 +8,7 @@ import { OnInit, Output, SimpleChanges, - TemplateRef + TemplateRef, } from '@angular/core'; import { I18nInterface, I18nService } from 'ng-devui/i18n'; import { DevConfigService, WithConfig } from 'ng-devui/utils'; @@ -20,10 +20,12 @@ import { AccordionItemClickEvent, AccordionMenuToggleEvent, AccordionMenuType, A templateUrl: './accordion.component.html', styleUrls: ['./accordion.component.scss'], preserveWhitespaces: false, - providers: [{ - provide: ACCORDION, - useExisting: forwardRef(() => AccordionComponent) - }] + providers: [ + { + provide: ACCORDION, + useExisting: forwardRef(() => AccordionComponent), + }, + ], }) export class AccordionComponent implements AccordionOptions, OnChanges, OnInit, OnDestroy { @Input() data: Array | AccordionMenuType; @@ -52,7 +54,7 @@ export class AccordionComponent implements AccordionOptions, OnChanges, OnInit, @Input() innerListTemplate: TemplateRef; // 可折叠菜单内容完全自定义，用做折叠面板 /* 内置路由/链接/动态判断路由或链接类型 */ - @Input() linkType: 'routerLink' | 'hrefLink' | 'dependOnLinkTypeKey' | '' | string = ''; + @Input() linkType: 'routerLink' | 'hrefLink' | 'dependOnLinkTypeKey' | '' | string = ''; @Input() linkTypeKey = 'linkType'; // linkType为'dependOnLinkTypeKey'时指定对象linkType定义区 @Input() linkKey = 'link'; // 链接内容的key @Input() linkTargetKey = 'target'; // 链接目标窗口的key @@ -64,15 +66,16 @@ export class AccordionComponent implements AccordionOptions, OnChanges, OnInit, activeItem; // 记录用户点击的激活菜单项 i18nCommonText: I18nInterface['common']; i18nSubscription: Subscription; - constructor(private i18n: I18nService, private devConfigService: DevConfigService) { - } + + constructor(private i18n: I18nService, private devConfigService: DevConfigService) {} ngOnChanges(changes: SimpleChanges) { - if (changes['data']) { + const { data, autoOpenActiveMenu } = changes; + if (data) { this.initActiveItem(); } - if (changes['autoOpenActiveMenu']) { - if (this.autoOpenActiveMenu && changes['autoOpenActiveMenu'].previousValue === false) { + if (autoOpenActiveMenu) { + if (this.autoOpenActiveMenu && autoOpenActiveMenu.previousValue === false) { this.cleanOpenData(); } } @@ -83,7 +86,7 @@ export class AccordionComponent implements AccordionOptions, OnChanges, OnInit, this.initActiveItem(); } this.i18nCommonText = this.i18n.getI18nText().common; - this.i18nSubscription = this.i18n.langChange().subscribe(data => { + this.i18nSubscription = this.i18n.langChange().subscribe((data) => { this.i18nCommonText = data.common; }); } @@ -114,14 +117,15 @@ export class AccordionComponent implements AccordionOptions, OnChanges, OnInit, } private cleanOpenData() { - this.flatten(this.data, this.childrenKey, true, false).forEach( - item => {item[this.openKey] = undefined;} - ); + this.flatten(this.data, this.childrenKey, true, false).forEach((item) => { + item[this.openKey] = undefined; + }); } // 默认激活 initActiveItem() { const activeItem = this.flatten(this.data, this.childrenKey) - .filter(item => item[this.activeKey]).pop(); + .filter((item) => item[this.activeKey]) + .pop(); if (activeItem) { if (!this.activeItem) { this.activeItemFn(activeItem); @@ -135,13 +139,13 @@ export class AccordionComponent implements AccordionOptions, OnChanges, OnInit, public itemClickFn = (itemEvent: AccordionItemClickEvent) => { const prevActiveItem = this.activeItem; this.activeItemFn(itemEvent.item); - this.itemClick.emit({...itemEvent, prevActiveItem: prevActiveItem}); + this.itemClick.emit({ ...itemEvent, prevActiveItem: prevActiveItem }); }; linkItemClickFn = (itemEvent: AccordionItemClickEvent) => { const prevActiveItem = this.activeItem; this.activeItem = itemEvent.item; - this.itemClick.emit({...itemEvent, prevActiveItem: prevActiveItem}); + this.itemClick.emit({ ...itemEvent, prevActiveItem: prevActiveItem }); }; // 打开或关闭可折叠菜单 @@ -163,7 +167,9 @@ export class AccordionComponent implements AccordionOptions, OnChanges, OnInit, // 打开或关闭一级菜单，如果有限制只能展开一项则关闭其他一级菜单 openMenuFn(item, open) { if (open && this.restrictOneOpen) { - (>(this.data)).forEach(itemtemp => { itemtemp[this.openKey] = false; }); + (this.data as any[]).forEach((itemtemp) => { + itemtemp[this.openKey] = false; + }); } item[this.openKey] = open; } diff --git a/devui/accordion/demo/template/template.component.html b/devui/accordion/demo/template/template.component.html index b3359d23..d6908ea5 100644 --- a/devui/accordion/demo/template/template.component.html +++ b/devui/accordion/demo/template/template.component.html @@ -10,12 +10,14 @@ > - {{ item.title }} - {{ item.children.length }} - reset - +
+ {{ item.title }} + reset + + {{ item.children.length }} +
{{ item.title }}(Click Count: {{ item.clicktimes || '0' }}) diff --git a/devui/accordion/demo/template/template.component.scss b/devui/accordion/demo/template/template.component.scss index a9e1c906..417e376c 100644 --- a/devui/accordion/demo/template/template.component.scss +++ b/devui/accordion/demo/template/template.component.scss @@ -4,17 +4,30 @@ width: 400px; } -.badge { - display: inline-block; - width: 16px; - height: 16px; - border-radius: 8px; - font-size: $devui-font-size; - line-height: 16px; - color: $devui-light-text; - text-align: center; - background: $devui-brand; - font-weight: normal; +.title-container { + display: flex; + align-items: center; + justify-content: space-between; + + .title-content { + flex: 1; + padding-right: 8px; + } + + .badge { + display: block; + width: fit-content; + height: 16px; + border-radius: 16px; + font-size: $devui-font-size-sm; + line-height: $devui-font-size-sm; + color: $devui-aide-text; + text-align: center; + background: $devui-label-bg; + font-weight: normal; + margin: 0 4px 0 8px; + padding: 2px 4px; + } } .loading { diff --git a/devui/alert/demo/alert-demo.component.ts b/devui/alert/demo/alert-demo.component.ts index 9c1723a9..d239c5ea 100755 --- a/devui/alert/demo/alert-demo.component.ts +++ b/devui/alert/demo/alert-demo.component.ts @@ -49,7 +49,7 @@ export class AlertDemoComponent implements OnInit, OnDestroy { { dAnchorLink: 'basic-usage', value: values['basic-usage'] }, { dAnchorLink: 'tips-to-close', value: values['tips-to-close'] }, { dAnchorLink: 'without-icon', value: values['without-icon'] }, - { dAnchorLink: 'carousel', value: values['carousel'] }, + { dAnchorLink: 'carousel', value: values.carousel }, ]; } diff --git a/devui/anchor/anchor.spec.ts b/devui/anchor/anchor.spec.ts index 2a631cc7..bb6b8d06 100644 --- a/devui/anchor/anchor.spec.ts +++ b/devui/anchor/anchor.spec.ts @@ -1,6 +1,6 @@ import { CommonModule } from '@angular/common'; import { Component, DebugElement } from '@angular/core'; -import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing'; +import { ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; import { Router } from '@angular/router'; import { RouterTestingModule } from '@angular/router/testing'; @@ -201,11 +201,11 @@ describe('anchor', () => { fixture.detectChanges(); tick(); const linkElement: HTMLElement = anchorLinkElements[0].nativeElement; - expect(anchorElements[0].classes['active']).toBeUndefined(); + expect(anchorElements[0].classes.active).toBeUndefined(); linkElement.click(); fixture.detectChanges(); tick(650); - expect(anchorElements[0].classes['active']).toBe(true); + expect(anchorElements[0].classes.active).toBe(true); })); it('should not set scrolling to target when there is no anchorblock', fakeAsync(() => { diff --git a/devui/auto-complete/auto-complete.directive.ts b/devui/auto-complete/auto-complete.directive.ts index ea0f69bd..446b0948 100755 --- a/devui/auto-complete/auto-complete.directive.ts +++ b/devui/auto-complete/auto-complete.directive.ts @@ -85,7 +85,7 @@ export class AutoCompleteDirective implements OnInit, OnDestroy, OnChanges, Cont @Input() appendToBody = false; @Input() appendToBodyDirections: Array = ['rightDown', 'leftDown', 'rightUp', 'leftUp']; - @Input() appendToBodyScrollStrategy: AppendToBodyScrollStrategyType; + @Input() @WithConfig() appendToBodyScrollStrategy: AppendToBodyScrollStrategyType; @Input() cdkOverlayOffsetY = 0; // 内部使用不开放 @Input() dAutoCompleteWidth: number; @Input() formatter: (item: any) => string; @@ -197,13 +197,14 @@ export class AutoCompleteDirective implements OnInit, OnDestroy, OnChanges, Cont ngOnChanges(changes: SimpleChanges) { const { appendToBodyDirections, appendToBodyScrollStrategy, source } = changes; + const globalScrollStrategy = this.devConfigService.getConfigForApi('appendToBodyScrollStrategy'); if (source && this.popupRef) { this.fillPopup(this.source); } if (appendToBodyDirections) { this.setPositions(); } - if (appendToBodyScrollStrategy && this.appendToBodyScrollStrategy) { + if (this.appendToBodyScrollStrategy && (appendToBodyScrollStrategy || globalScrollStrategy)) { const func = this.scrollStrategyOption[this.appendToBodyScrollStrategy]; this.scrollStrategy = func(); if (this.popupRef) { diff --git a/devui/back-top/back-top.component.ts b/devui/back-top/back-top.component.ts index c63f70ce..9ea713b9 100644 --- a/devui/back-top/back-top.component.ts +++ b/devui/back-top/back-top.component.ts @@ -14,9 +14,9 @@ import { OnInit, Output, SimpleChanges, - TemplateRef + TemplateRef, } from '@angular/core'; -import { fromEvent, Subscription } from 'rxjs'; +import { Subscription, fromEvent } from 'rxjs'; import { debounceTime } from 'rxjs/operators'; @Component({ @@ -56,7 +56,7 @@ export class BackTopComponent implements OnChanges, OnInit, OnDestroy, AfterView } ngOnChanges(changes: SimpleChanges): void { - if (changes['scrollTarget']) { + if (changes.scrollTarget) { if (this.subs) { this.subs.unsubscribe(); } @@ -223,8 +223,10 @@ export class BackTopComponent implements OnChanges, OnInit, OnDestroy, AfterView const isRight = left > this.dragBoundary.maxLeft; const isTop = top < this.dragBoundary.minTop; const isBottom = top > this.dragBoundary.maxTop; - this.dragBoundary.dom.style.left = `${isRight ? this.dragBoundary.maxLeft : isLeft ? this.dragBoundary.minLeft : left}px`; - this.dragBoundary.dom.style.top = `${isBottom ? this.dragBoundary.maxTop : isTop ? this.dragBoundary.minTop : top}px`; + const leftResult = isLeft ? this.dragBoundary.minLeft : left; + const topResult = isTop ? this.dragBoundary.minTop : top; + this.dragBoundary.dom.style.left = `${isRight ? this.dragBoundary.maxLeft : leftResult}px`; + this.dragBoundary.dom.style.top = `${isBottom ? this.dragBoundary.maxTop : topResult}px`; // 如到达边界释放拖拽动作，避免鼠标偏移较大距离后返回主视窗仍可拖拽 if ([isLeft, isRight, isTop, isBottom].includes(true)) { this.onMouseUp(); diff --git a/devui/badge/demo/badge-demo.component.ts b/devui/badge/demo/badge-demo.component.ts index 638b9434..22383008 100644 --- a/devui/badge/demo/badge-demo.component.ts +++ b/devui/badge/demo/badge-demo.component.ts @@ -40,6 +40,7 @@ export class BadgeDemoComponent implements OnInit, OnDestroy { navItems = []; subs: Subscription = new Subscription(); + constructor(private translate: TranslateService) {} ngOnInit() { @@ -63,8 +64,8 @@ export class BadgeDemoComponent implements OnInit, OnDestroy { { dAnchorLink: 'badge-count', value: values['badge-count'] }, { dAnchorLink: 'badge-dot', value: values['badge-dot'] }, { dAnchorLink: 'badge-status', value: values['badge-status'] }, - { dAnchorLink: 'position', value: values['position'] }, - { dAnchorLink: 'custom', value: values['custom'] } + { dAnchorLink: 'position', value: values.position }, + { dAnchorLink: 'custom', value: values.custom }, ]; } diff --git a/devui/breadcrumb/breadcrumb-item/breadcrumb-item.component.scss b/devui/breadcrumb/breadcrumb-item/breadcrumb-item.component.scss index 0a989c9a..1a10d2ae 100644 --- a/devui/breadcrumb/breadcrumb-item/breadcrumb-item.component.scss +++ b/devui/breadcrumb/breadcrumb-item/breadcrumb-item.component.scss @@ -4,6 +4,7 @@ :host { display: inline-flex; + align-items: center; } .devui-breadcrumb-font-style { @@ -88,6 +89,7 @@ line-height: 36px; width: 170px; display: inline-block; + vertical-align: top; &:focus { text-decoration: none; @@ -145,6 +147,7 @@ d-search { overflow: hidden; white-space: nowrap; max-width: 440px; + vertical-align: top; } } diff --git a/devui/breadcrumb/demo/click-block/click-block.component.ts b/devui/breadcrumb/demo/click-block/click-block.component.ts index fa1a8983..b1fe3de7 100644 --- a/devui/breadcrumb/demo/click-block/click-block.component.ts +++ b/devui/breadcrumb/demo/click-block/click-block.component.ts @@ -1,42 +1,39 @@ -import { Component, OnInit } from '@angular/core'; +import { Component } from '@angular/core'; import { BreadCrumbService, MenuConfig } from 'ng-devui/breadcrumb'; import { HelperUtils } from 'ng-devui/common'; import { DialogService } from 'ng-devui/modal'; @Component({ selector: 'd-click-block', - templateUrl: './click-block.component.html' + templateUrl: './click-block.component.html', }) -export class ClickBlockComponent implements OnInit { - - constructor(private breadCrumbService: BreadCrumbService, private dialogService: DialogService) { } - - ngOnInit() { - } +export class ClickBlockComponent { breadItem: Array = [ { linkType: 'hrefLink', - link: 'https://angular.cn/', - name: 'Home' + link: '//angular.cn/', + name: 'Home', }, { linkType: 'routerLink', link: './home', - name: 'DevUI' + name: 'DevUI', }, { linkType: 'routerLink', link: '/components/zh-cn/button/demo#button-common', - name: 'Profile' - } + name: 'Profile', + }, ]; + constructor(private breadCrumbService: BreadCrumbService, private dialogService: DialogService) {} + navigate($event, item) { this.canNavigate(item).then((can) => { if (!can) { return; } - if(item.linkType === 'routerLink') { + if (item.linkType === 'routerLink') { this.breadCrumbService.navigateTo($event, item); } else { HelperUtils.jumpOuterUrl(item.link, '_self'); @@ -62,7 +59,7 @@ export class ClickBlockComponent implements OnInit { handler: ($event: Event) => { results.modalInstance.hide(); resolve(true); - } + }, }, { id: 'btn-cancel', @@ -71,9 +68,9 @@ export class ClickBlockComponent implements OnInit { handler: ($event: Event) => { results.modalInstance.hide(); resolve(false); - } + }, }, - ] + ], }); }); } diff --git a/devui/carousel/carousel.component.ts b/devui/carousel/carousel.component.ts index 30aa573c..c76b10d6 100644 --- a/devui/carousel/carousel.component.ts +++ b/devui/carousel/carousel.component.ts @@ -125,7 +125,8 @@ export class CarouselComponent implements OnInit, AfterContentInit, OnChanges, O this.translatePosition(this.itemCount); this.adjustTransition(targetEl); } else { - this.activeIndex = index < 0 ? 0 : index > this.itemCount - 1 ? this.itemCount - 1 : index; + const idx = index > this.itemCount - 1 ? this.itemCount - 1 : index; + this.activeIndex = index < 0 ? 0 : idx; this.translatePosition(this.activeIndex); } this.activeIndexChange.emit(this.activeIndex); diff --git a/devui/cascader/cascader.component.html b/devui/cascader/cascader.component.html index 8fa22b19..c8d8da3e 100644 --- a/devui/cascader/cascader.component.html +++ b/devui/cascader/cascader.component.html @@ -9,6 +9,7 @@ (toggleEvent)="onToggle($event)" [showAnimation]="showAnimation" [appendToBodyDirections]="subMenuDirections" + [ngClass]="{ 'dropdown-show-clear': allowClear && (showTextValue || multipleValueList.length) }" >
{{ placeholder }}
-
+
-
+
{{ placeholder }}
-
+
-
+
CascaderComponent), - multi: true + multi: true, }, - CascaderService + CascaderService, ], - preserveWhitespaces: false + preserveWhitespaces: false, }) export class CascaderComponent implements OnInit, OnDestroy, OnChanges, ControlValueAccessor { @ViewChild('mainDropdown') mainDropdown: DropDownDirective; @@ -63,24 +74,26 @@ export class CascaderComponent implements OnInit, OnDestroy, OnChanges, ControlV @Output() toggleEvent = new EventEmitter(); @Input() @WithConfig() showGlowStyle = true; - @HostBinding('class.devui-glow-style') get hasGlowStyle () { + @HostBinding('class.devui-glow-style') get hasGlowStyle() { return this.showGlowStyle; - }; - - subMenuDirections: ConnectedPosition[] = [{ - originX: 'start', - originY: 'bottom', - overlayX: 'start', - overlayY: 'top', - offsetX: 0 - }, - { - originX: 'start', - originY: 'top', - overlayX: 'start', - overlayY: 'bottom', - offsetX: 0, - }]; + } + + subMenuDirections: ConnectedPosition[] = [ + { + originX: 'start', + originY: 'bottom', + overlayX: 'start', + overlayY: 'top', + offsetX: 0, + }, + { + originX: 'start', + originY: 'top', + overlayX: 'start', + overlayY: 'bottom', + offsetX: 0, + }, + ]; isLazyLoad: boolean; @@ -98,23 +111,18 @@ export class CascaderComponent implements OnInit, OnDestroy, OnChanges, ControlV onChange = Function.prototype; onTouched = Function.prototype; - get columnList () { + get columnList() { return this.cascaderSrv.columnList; } - get searchResultList () { + get searchResultList() { return this.cascaderSrv.searchResultList; } i18nCommonText: I18nInterface['common']; i18nSubscription: Subscription; - constructor( - private cascaderSrv: CascaderService, - private i18n: I18nService, - private devConfigService: DevConfigService - ) { - } + constructor(private cascaderSrv: CascaderService, private i18n: I18nService, private devConfigService: DevConfigService) {} // 获取整颗树的公共方法 public getOptionTree(): CascaderItem[] { @@ -132,17 +140,18 @@ export class CascaderComponent implements OnInit, OnDestroy, OnChanges, ControlV this.initI18n(); } - ngOnChanges(change: SimpleChanges) { - if (change && change['options'] && !change.options.firstChange) { + ngOnChanges(changes: SimpleChanges) { + const { options, canSelectParent } = changes; + if (options && !options.firstChange) { this.cascaderSrv.initOptions(this.options); - } else if (change && change['canSelectParent'] && !change.canSelectParent.firstChange) { + } else if (canSelectParent && !canSelectParent.firstChange) { this.cascaderSrv.canSelectParent = this.canSelectParent; } } initI18n(): void { this.i18nCommonText = this.i18n.getI18nText().common; - this.i18nSubscription = this.i18n.langChange().subscribe(data => { + this.i18nSubscription = this.i18n.langChange().subscribe((data) => { this.i18nCommonText = data.common; }); } @@ -155,7 +164,8 @@ export class CascaderComponent implements OnInit, OnDestroy, OnChanges, ControlV if (option.checked) { return; } - if (this.multiple) { // 多选模式下更新数据后需要刷新dropdown位置和重新聚焦input + if (this.multiple) { + // 多选模式下更新数据后需要刷新dropdown位置和重新聚焦input option.checked = true; this.writeValue([...this.cascaderSrv.multipleValue, option.valueList]); this.onChange(this.cascaderSrv.multipleValue); @@ -171,32 +181,24 @@ export class CascaderComponent implements OnInit, OnDestroy, OnChanges, ControlV } initObservale(): void { - this.cascaderSrv.closeMianDropdown.pipe( - takeUntil(this.unsubscribe$) - ).subscribe(res => { + this.cascaderSrv.closeMianDropdown.pipe(takeUntil(this.unsubscribe$)).subscribe((res) => { if (this.mainDropdown) { this.mainDropdown.isOpen = false; } }); - this.cascaderSrv.currentValueChange.pipe( - takeUntil(this.unsubscribe$) - ).subscribe(res => { + this.cascaderSrv.currentValueChange.pipe(takeUntil(this.unsubscribe$)).subscribe((res) => { this.writeValue(res); this.onChange(res); }); - this.cascaderSrv.openDrawer.pipe( - takeUntil(this.unsubscribe$) - ).subscribe(res => { + this.cascaderSrv.openDrawer.pipe(takeUntil(this.unsubscribe$)).subscribe((res) => { this.rePosition(); }); if (this.multiple) { - this.cascaderSrv.updateTagList.pipe( - takeUntil(this.unsubscribe$) - ).subscribe(res => { - const targetIndex = this.multipleValueList.findIndex(t => t.value === res.option.value); + this.cascaderSrv.updateTagList.pipe(takeUntil(this.unsubscribe$)).subscribe((res) => { + const targetIndex = this.multipleValueList.findIndex((t) => t.value === res.option.value); if (res.isAdd) { if (targetIndex === -1) { this.multipleValueList.push(res.option); @@ -218,36 +220,37 @@ export class CascaderComponent implements OnInit, OnDestroy, OnChanges, ControlV } if (this.allowSearch) { - this.searchValueChange.pipe( - takeUntil(this.unsubscribe$), - debounceTime(DEBOUNCE_TIME), - distinctUntilChanged(), - filter(t => t !== '') - ).subscribe(value => { - clearTimeout(this.timer); - if (this.mainDropdown && !this.mainDropdown.isOpen) { - this.mainDropdown.isOpen = true; - } + this.searchValueChange + .pipe( + takeUntil(this.unsubscribe$), + debounceTime(DEBOUNCE_TIME), + distinctUntilChanged(), + filter((t) => t !== '') + ) + .subscribe((value) => { + clearTimeout(this.timer); + if (this.mainDropdown && !this.mainDropdown.isOpen) { + this.mainDropdown.isOpen = true; + } - if (this.multiple && this.innerInput) { - this.innerInput.nativeElement.focus(); - } - this.cascaderSrv.searchResultList = []; - this.cascaderSrv.searchByString(value); - this.showSearchPanel = true; - }); + if (this.multiple && this.innerInput) { + this.innerInput.nativeElement.focus(); + } + this.cascaderSrv.searchResultList = []; + this.cascaderSrv.searchByString(value); + this.showSearchPanel = true; + }); } if (this.isLazyLoad) { - this.cascaderSrv.updateShowText.pipe( - takeUntil(this.unsubscribe$) - ).subscribe(() => { + this.cascaderSrv.updateShowText.pipe(takeUntil(this.unsubscribe$)).subscribe(() => { if (this.multiple) { this.multipleValueList = this.getMultipleValueFromValueList(this.lazyloadValue); this.cascaderSrv.multipleValue = this.lazyloadValue; } else { - this.showTextValue = this.showPath ? - this.getPathLabelFormValue(this.cascaderSrv._currentValue) : this.getLabelFromValue(this.cascaderSrv._currentValue); + this.showTextValue = this.showPath + ? this.getPathLabelFormValue(this.cascaderSrv._currentValue) + : this.getLabelFromValue(this.cascaderSrv._currentValue); } }); } @@ -256,7 +259,7 @@ export class CascaderComponent implements OnInit, OnDestroy, OnChanges, ControlV deleteTag(tagEvent, option: CascaderItem): void { tagEvent.event.stopPropagation(); this.cascaderSrv.updateOptionCheckedStatus(option.value, false, this.checkboxRelation.upward, this.checkboxRelation.downward); - this.multipleValueList = this.multipleValueList.filter(t => t.value !== option.value); + this.multipleValueList = this.multipleValueList.filter((t) => t.value !== option.value); this.onChange(this.cascaderSrv.currentMultipleValue); // 当taglist变化导致input高度变化时，更新相对位置 setTimeout(() => { @@ -277,8 +280,9 @@ export class CascaderComponent implements OnInit, OnDestroy, OnChanges, ControlV if (!value) { this.showTextValue = ''; } else { - this.showTextValue = this.showPath ? - this.getPathLabelFormValue(value as Array) : this.getLabelFromValue(value as Array); + this.showTextValue = this.showPath + ? this.getPathLabelFormValue(value as Array) + : this.getLabelFromValue(value as Array); this.cascaderSrv._currentValue = value as Array; this.cascaderSrv.updateOptionByValue(); } @@ -301,9 +305,9 @@ export class CascaderComponent implements OnInit, OnDestroy, OnChanges, ControlV const valueList = this.cascaderSrv.currentMultipleValue; valueList.forEach((item, index) => { const value = item[item.length - 1]; - const target = this.multipleValueList.find(t => t.value === value); + const target = this.multipleValueList.find((t) => t.value === value); if (target) { - target['pathLabel'] = this.getPathLabelFormValue(item); + target.pathLabel = this.getPathLabelFormValue(item); } }); } @@ -311,12 +315,12 @@ export class CascaderComponent implements OnInit, OnDestroy, OnChanges, ControlV // 从路径数组中获取所有tag的值，并让对应checkbox激活 getMultipleValueFromValueList(valueList: Array[]): CascaderItem[] { const targetList = []; - valueList.forEach(value => { + valueList.forEach((value) => { let cur: CascaderItem; let cacheTarget: CascaderItem; let list = this.cascaderSrv.options; for (let i = 0; i < value.length; i++) { - cur = list.find(l => l.value === value[i]); + cur = list.find((l) => l.value === value[i]); cacheTarget = cur; if (this.isLazyLoad && cur && !cur.children?.length && !cur.isLeaf) { this.cascaderSrv.lazyloadMultipleChild(cur, i); @@ -344,8 +348,8 @@ export class CascaderComponent implements OnInit, OnDestroy, OnChanges, ControlV getLabelFromValue(value: Array): string { let cur; let list = this.cascaderSrv.options; - value.forEach(item => { - cur = list.find(t => t.value === item) || ''; + value.forEach((item) => { + cur = list.find((t) => t.value === item) || ''; list = cur.children || []; }); @@ -359,7 +363,7 @@ export class CascaderComponent implements OnInit, OnDestroy, OnChanges, ControlV let list = this.cascaderSrv.options; value.forEach((item, index) => { - cur = list.find(t => t.value === item) || ''; + cur = list.find((t) => t.value === item) || ''; if (cur) { path = path === '' ? path + cur.label : path + ' / ' + cur.label; } else if (this.cascaderSrv.columnList.length === index + 1) { @@ -386,7 +390,7 @@ export class CascaderComponent implements OnInit, OnDestroy, OnChanges, ControlV onToggle(isOpen: boolean): void { this.toggleEvent.emit(isOpen); if (isOpen && this.multiple) { - this.cascaderSrv.clearTargetActive(this.cascaderSrv.options.find(t => t.active)); + this.cascaderSrv.clearTargetActive(this.cascaderSrv.options.find((t) => t.active)); this.cascaderSrv.columnList.splice(1); if (this.innerInput) { this.innerInput.nativeElement.focus(); @@ -424,7 +428,9 @@ export class CascaderComponent implements OnInit, OnDestroy, OnChanges, ControlV const width = this.dropdownComp.overlay.overlayRef?.overlayElement.clientWidth; const offsetX = this.dropdownComp.overlay.overlayRef?.overlayElement.offsetLeft; const offsetRight = window.innerWidth - width - offsetX - 20; - this.subMenuDirections.forEach(t => {t.offsetX = offsetRight < 0 ? offsetRight : 0;}); + this.subMenuDirections.forEach((t) => { + t.offsetX = offsetRight < 0 ? offsetRight : 0; + }); this.dropdownComp.reposition(); }, 0); } diff --git a/devui/cascader/cascader.service.ts b/devui/cascader/cascader.service.ts index 07c4a157..7532d88c 100644 --- a/devui/cascader/cascader.service.ts +++ b/devui/cascader/cascader.service.ts @@ -5,7 +5,6 @@ import { CascaderItem } from './cascader.type'; @Injectable() export class CascaderService implements OnDestroy { - _currentValue: Array = []; multipleValue: Array[] = []; @@ -26,7 +25,7 @@ export class CascaderService implements OnDestroy { loadChildrenFn: (value: CascaderItem) => Promise | Observable; set currentValue(value: Array) { - this._currentValue = value.filter(item => item !== undefined); + this._currentValue = value.filter((item) => item !== undefined); this.currentValueChange.next(this._currentValue); } @@ -60,12 +59,14 @@ export class CascaderService implements OnDestroy { this.columnList = []; this.options = cloneDeep(options); // 标记根节点 - this.options.forEach(t => {t['isRoot'] = true;}); + this.options.forEach((t) => { + t.isRoot = true; + }); this.columnList.push(this.options); } openColumn(option: CascaderItem, colIndex: number, islazyLoad: boolean, reload = false): void { - this.clearTargetActive(this.columnList[colIndex].find(t => t.active)); + this.clearTargetActive(this.columnList[colIndex].find((t) => t.active)); option.active = true; this.columnList.splice(colIndex + 1); @@ -78,7 +79,7 @@ export class CascaderService implements OnDestroy { const fn = this.loadChildrenFn(option); if ((fn as Promise).then) { - (fn as Promise).then(res => { + (fn as Promise).then((res) => { this.columnList.splice(colIndex + 1); // 防止多个同时懒加载，造成多余的添加 option.children = res || []; option._loading = false; @@ -96,7 +97,7 @@ export class CascaderService implements OnDestroy { } }); } else { - (fn as Observable).subscribe(res => { + (fn as Observable).subscribe((res) => { this.columnList.splice(colIndex + 1); // 防止多个同时懒加载，造成多余的添加 option.children = res || []; option._loading = false; @@ -124,25 +125,27 @@ export class CascaderService implements OnDestroy { } option.active = false; if (option.children) { - this.clearTargetActive(option.children.find(t => t.active)); + this.clearTargetActive(option.children.find((t) => t.active)); } } setCurrentValue(): void { - this.currentValue = this.columnList.map(listItem => listItem.find(optionItem => optionItem.active)?.value); + this.currentValue = this.columnList.map((listItem) => listItem.find((optionItem) => optionItem.active)?.value); } updateOptionByValue(): void { this.resetNodeStatus(); this.columnList = [this.options]; for (let index = 0; index < this.currentValue.length; index++) { - const target = this.columnList[index]?.find(listItem => listItem.value === this.currentValue[index]); + const target = this.columnList[index]?.find((listItem) => listItem.value === this.currentValue[index]); if (target) { - target['active'] = true; - if (target.children && target.children.length) { // 有子菜单展开子菜单 + target.active = true; + if (target.children && target.children.length) { + // 有子菜单展开子菜单 this.columnList.push(target.children); - } else if (this.isLazyLoad) { // 懒加载没有子菜单的情况下，非叶子节点执行展开，叶子节点执行选中 + } else if (this.isLazyLoad) { + // 懒加载没有子菜单的情况下，非叶子节点执行展开，叶子节点执行选中 this.openColumn(target, index, !target.isLeaf, !target.isLeaf); break; } @@ -160,10 +163,10 @@ export class CascaderService implements OnDestroy { } resetNodeStatus(option: CascaderItem[] = this.options): void { - option.forEach(item => { - item['active'] = false; - item['checked'] = false; - item['halfChecked'] = false; + option.forEach((item) => { + item.active = false; + item.checked = false; + item.halfChecked = false; if (item.children) { this.resetNodeStatus(item.children); } @@ -172,20 +175,21 @@ export class CascaderService implements OnDestroy { // 在多选模式下，更新节点树的checked状态 updateOptionCheckedStatus(targetValue: string | number, checked: boolean, upward = true, downward = true, isEmit = true): void { - let targetNode = this.options.find(t => t.value === targetValue); + let targetNode = this.options.find((t) => t.value === targetValue); // 当主下拉列表包含了目标，即目标无父节点 if (targetNode) { - targetNode['checked'] = checked; - targetNode['halfChecked'] = false; + targetNode.checked = checked; + targetNode.halfChecked = false; if (targetNode.children && downward) { this.updateChildrenChecked(targetNode, checked, isEmit); } - } else { // 当存在父节点时，需要检查同级节点来确定父节点状态 + } else { + // 当存在父节点时，需要检查同级节点来确定父节点状态 const parentNode = this.getParentNode(targetValue); - targetNode = parentNode.children.find(t => t.value === targetValue); + targetNode = parentNode.children.find((t) => t.value === targetValue); - targetNode['checked'] = checked; - targetNode['halfChecked'] = false; + targetNode.checked = checked; + targetNode.halfChecked = false; if (upward) { this.updateParentChecked(parentNode, isEmit); } @@ -198,16 +202,16 @@ export class CascaderService implements OnDestroy { // 子节点按父节点状态更新 updateChildrenChecked(node: CascaderItem, checked: boolean, isEmit: boolean) { let hasDisable = false; - node.children.forEach(child => { + node.children.forEach((child) => { if (!child.disabled) { - child['checked'] = checked; - child['halfChecked'] = false; + child.checked = checked; + child.halfChecked = false; if (child.children && child.children.length) { if (this.canSelectParent) { this.updateTagList.next({ isAdd: checked, option: child, - isEmit + isEmit, }); } this.updateChildrenChecked(child, checked, isEmit); @@ -215,7 +219,7 @@ export class CascaderService implements OnDestroy { this.updateTagList.next({ isAdd: checked, option: child, - isEmit + isEmit, }); } } else { @@ -230,31 +234,31 @@ export class CascaderService implements OnDestroy { // 父节点按所有子节点状态更新 updateParentChecked(node: CascaderItem, isEmit: boolean) { - const checkedChild = node.children.find(t => t['checked']); - const halfcheckedChild = node.children.find(t => t['halfChecked']); - const uncheckedChild = node.children.find(t => !t['halfChecked'] && !t['checked']); + const checkedChild = node.children.find((t) => t.checked); + const halfcheckedChild = node.children.find((t) => t.halfChecked); + const uncheckedChild = node.children.find((t) => !t.halfChecked && !t.checked); if (halfcheckedChild || (checkedChild && uncheckedChild)) { - node['checked'] = false; - node['halfChecked'] = true; + node.checked = false; + node.halfChecked = true; } else if (!checkedChild && !halfcheckedChild) { - node['checked'] = false; - node['halfChecked'] = false; + node.checked = false; + node.halfChecked = false; } else { - node['checked'] = true; - node['halfChecked'] = false; + node.checked = true; + node.halfChecked = false; } if (this.canSelectParent) { this.updateTagList.next({ - isAdd: node['checked'], + isAdd: node.checked, option: node, - isEmit + isEmit, }); } // 如果此节点非根节点，则继续找它的父节点进行更新 - if (!node['isRoot']) { + if (!node.isRoot) { this.updateParentChecked(this.getParentNode(node.value), isEmit); } } @@ -265,7 +269,7 @@ export class CascaderService implements OnDestroy { let cur: CascaderItem; while (queue.length) { cur = queue.shift(); - if (cur.children && cur.children.find(t => t.value === childValue)) { + if (cur.children && cur.children.find((t) => t.value === childValue)) { break; } else if (cur.children) { queue.push(...cur.children); @@ -276,7 +280,7 @@ export class CascaderService implements OnDestroy { getMultipleValue(value, option: CascaderItem[]): void { const isNoRelation = !this.checkboxRelation.downward || !this.checkboxRelation.upward; - option.forEach(item => { + option.forEach((item) => { const _value = [...value]; _value.push(item.value); if (item.children && item.children.length && (item.checked || item.halfChecked)) { @@ -290,7 +294,6 @@ export class CascaderService implements OnDestroy { this.getMultipleValue(_value, item.children); } }); - } closeAllDropdown(): void { @@ -299,7 +302,7 @@ export class CascaderService implements OnDestroy { // 搜索功能 searchByString(str: string, currentlabel?: string, currentValue: Array = [], list = this.options): void { - list.forEach(item => { + list.forEach((item) => { const label = currentlabel ? currentlabel + ' / ' + item.label : item.label; const valueList = [...currentValue, item.value]; if (item.children && item.children.length) { @@ -309,7 +312,7 @@ export class CascaderService implements OnDestroy { this.searchResultList.push({ label, valueList, - checked: item.checked + checked: item.checked, }); } } @@ -323,5 +326,4 @@ export class CascaderService implements OnDestroy { this.resetStatus.complete(); this.openDrawer.complete(); } - } diff --git a/devui/cascader/cascader.spec.ts b/devui/cascader/cascader.spec.ts index 93f51f7d..99957be2 100644 --- a/devui/cascader/cascader.spec.ts +++ b/devui/cascader/cascader.spec.ts @@ -366,7 +366,6 @@ describe('cascader', () => { }); it('allowClear param should work', () => { - expect(debugElement.query(By.css('.dropdown-show-clear'))).toBeTruthy(); testComponent.allowClear = false; fixture.detectChanges(); expect(debugElement.query(By.css('.dropdown-show-clear'))).toBeFalsy(); diff --git a/devui/category-search/category-search.component.html b/devui/category-search/category-search.component.html index cdaf0785..725f8da5 100644 --- a/devui/category-search/category-search.component.html +++ b/devui/category-search/category-search.component.html @@ -1,7 +1,12 @@
@@ -54,12 +59,13 @@ #inputDropdown="d-dropdown" dDropDown appendToBody - [trigger]="'manually'" [appendToBodyDirections]="['rightDown', 'rightUp', 'leftDown', 'leftUp']" + [autofocusToggleElement]="inputAutofocus" [closeScope]="checkType(currentSelectTag)" + [trigger]="'manually'" (toggleEvent)="resetContent(inputDropdown)" > -
+
- -
- -
-
- - + +
+
+ + + + + +
+ + +
+
{{ i18nCategorySearchText?.confirm }} {{ i18nCategorySearchText?.cancel }} @@ -409,23 +431,27 @@ -
- -
-
- - - - {{ splitLabel('label', label) }} - - -
+ + +
+ + + + {{ splitLabel('label', label) }} + + +
+
{{ i18nCategorySearchText?.confirm }} {{ i18nCategorySearchText?.cancel }} @@ -460,6 +486,7 @@ [min]="tagOption.min?.left" [max]="tagOption.max?.left" [maxLength]="tagOption.maxLength?.left" + [decimalLimit]="tagOption.decimalLimit?.left" [step]="tagOption.step?.left || 1" [reg]="tagOption.reg?.left" [placeholder]="tagOption.placeholder?.left || ''" @@ -472,6 +499,7 @@ [min]="tagOption.min?.right" [max]="tagOption.max?.right" [maxLength]="tagOption.maxLength?.right" + [decimalLimit]="tagOption.decimalLimit?.right" [step]="tagOption.step?.right || 1" [reg]="tagOption.reg?.right" [placeholder]="tagOption.placeholder?.right || ''" @@ -480,7 +508,9 @@
- {{ i18nCategorySearchText?.confirm }} + {{ + i18nCategorySearchText?.confirm + }} {{ i18nCategorySearchText?.cancel }}
@@ -502,17 +532,22 @@ (ngModelChange)="treeSearch($event, tagOption.searchFn)" >
-
+
item.field === 'devuiCategorySearchKeyword'); if (keyword) { - keyword.label = this.textConfig.keywordName || this.i18nCategorySearchText['keyword']; + keyword.label = this.textConfig.keywordName || this.i18nCategorySearchText.keyword; keyword.title = `${keyword.label}:${keyword.value?.label}`; } } @@ -335,7 +337,7 @@ export class CategorySearchComponent implements OnChanges, OnDestroy, AfterViewI } createSearchKeyTag(isSearch: boolean) { - const label = this.textConfig.keywordName || this.i18nCategorySearchText['keyword']; + const label = this.textConfig.keywordName || this.i18nCategorySearchText.keyword; const searchKeyTag: ICategorySearchTagItem = { options: [], field: 'devuiCategorySearchKeyword', @@ -401,9 +403,6 @@ export class CategorySearchComponent implements OnChanges, OnDestroy, AfterViewI item.value = preValue; } item.value.cache = (item.value.value && typeof item.value.value === 'object' && cloneDeep(item.value.value)) || item.value.value; - if (item.type === 'treeSelect' && item.options && item.options.length) { - item.value.options = cloneDeep(item.options); - } item.customTemplate = this.customTemplates[item.field || item.dField] || item.customTemplate; return item; } @@ -430,7 +429,10 @@ export class CategorySearchComponent implements OnChanges, OnDestroy, AfterViewI return; } item.value.cache = cloneDeep(item.value.value); - result = this.joinLabelTypes.includes(item.type) ? this.getItemValue(item.value.value, item.filterKey || 'label') : ''; + if (this.joinLabelTypes.includes(item.type)) { + result = this.getItemValue(item.value.value, item.filterKey || 'label'); + this.isSelectAll(item); + } } item.title = this.setTitle(item, item.type, result); if (item.type === 'label' && item.options[0] && !item.options[0].$label) { @@ -499,7 +501,8 @@ export class CategorySearchComponent implements OnChanges, OnDestroy, AfterViewI if (this.categoryInGroup && tag.group) { const group = this.categoryDictionary[tag.group]; const len = group.groupLength; - group.groupLength = isSelected ? len - 1 : isInit ? len : len + 1; + const resInit = isInit ? len : len + 1; + group.groupLength = isSelected ? len - 1 : resInit; group.isSelected = group.groupLength === 0; } } @@ -603,7 +606,7 @@ export class CategorySearchComponent implements OnChanges, OnDestroy, AfterViewI } else { this.inputEle.nativeElement.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'nearest' }); } - } else if (!isInit) { + } else if (!isInit && this.inputAutofocus) { // 初始化不聚焦，避免展开下拉 this.inputEle.nativeElement.focus(); } @@ -628,7 +631,7 @@ export class CategorySearchComponent implements OnChanges, OnDestroy, AfterViewI } updateFieldValue(field: ICategorySearchTagItem, value: any) { - const result = {}; + const result: any = {}; const filterKey = field.filterKey || 'label'; const colorKey = field.colorKey || 'color'; result[filterKey] = value; @@ -643,7 +646,7 @@ export class CategorySearchComponent implements OnChanges, OnDestroy, AfterViewI this.mergeToLabel(field); } result[colorKey] = COLORS[Math.floor(COLORS.length * Math.random())]; - result['$label'] = `${value}_${result[colorKey]}`; + result.$label = `${value}_${result[colorKey]}`; } if (this.joinLabelTypes.includes(field.type)) { field.value.value = [result]; @@ -670,6 +673,9 @@ export class CategorySearchComponent implements OnChanges, OnDestroy, AfterViewI this.enterSearch = this.searchKey !== ''; this.searchEvent.emit({ selectedTags: result, searchKey: this.searchKey }); } else { + if(tag.type === 'treeSelect'){ + this.treeFactories[tag.field] = undefined; + } this.resolveCategoryDisplay(tag, 'add'); this.selectedTagsChange.emit({ selectedTags: result, currentChangeTag: tag, operation: 'delete' }); } @@ -689,14 +695,16 @@ export class CategorySearchComponent implements OnChanges, OnDestroy, AfterViewI // 解决dropdownMenu展开时焦点会自动到toggle上的问题 focusInput() { setTimeout(() => { - this.inputEle.nativeElement.focus(); + if (this.inputAutofocus) { + this.inputEle.nativeElement.focus(); + } }); } // 失焦时关闭当前下拉列表，延时用以防止关闭掉点击分类展开的内容列表 blurInput(event: FocusEvent) { this.blurTimer = setTimeout(() => { - const className = event.relatedTarget && event.relatedTarget['className']; + const className = event.relatedTarget && (event.relatedTarget as any).className; const outsideHost = !className || (typeof className === 'string' && className.indexOf(`devui-category-dropdown-menu-${this.id}`) === -1); if (!this.currentSelectTag && this.currentOpenDropdown && outsideHost) { @@ -706,7 +714,7 @@ export class CategorySearchComponent implements OnChanges, OnDestroy, AfterViewI } openMenu(inputDropdown: DropDownDirective, event: Event) { - const code = event['code']; + const code = (event as any).code; if (inputDropdown.isOpen || (event.type === 'keyup' && ['Enter', 'Backspace', 'Escape'].includes(code))) { return; } @@ -758,7 +766,9 @@ export class CategorySearchComponent implements OnChanges, OnDestroy, AfterViewI finishChoose() { this.currentSelectTag = undefined; - this.inputEle.nativeElement.focus(); + if (this.inputAutofocus) { + this.inputEle.nativeElement.focus(); + } } clearFilter(event: MouseEvent) { @@ -774,6 +784,9 @@ export class CategorySearchComponent implements OnChanges, OnDestroy, AfterViewI if (this.searchKey || this.searchKeyCache) { this.searchKey = ''; this.searchKeyCache = ''; + setTimeout(() => { + this.enterSearch = false; + }, this.DELAY); } if (this.currentSelectTag) { this.currentSelectTag = undefined; @@ -808,7 +821,7 @@ export class CategorySearchComponent implements OnChanges, OnDestroy, AfterViewI searchKeyChangeEvent(event: string) { this.searchKey = event; this.enterSearch = !!event; - this.currentSearchCategory = event ? this.category.filter((item) => item['label'].toLowerCase().includes(event.toLowerCase())) : []; + this.currentSearchCategory = event ? this.category.filter((item) => item.label.toLowerCase().includes(event.toLowerCase())) : []; this.searchKeyChange.emit(event); } @@ -930,51 +943,34 @@ export class CategorySearchComponent implements OnChanges, OnDestroy, AfterViewI if (dropdown.isOpen) { this.checkDropdownBoundary(dropdown, dropdownMenu); this.currentOpenDropdown = dropdown; - if (tag?.type === 'keyword') { - this.searchKey = this.searchKeyCache; - this.searchKeyChangeEvent(this.searchKey); - this.inputEle.nativeElement.focus(); - dropdown.isOpen = false; - } } else { + const item = tagItem as ICategorySearchTagItem; this.clearCurrentSelectTagFromSearch(); this.currentOpenDropdown = undefined; this.showNoDataTips = false; - this.resetTreeRender(dropdown, tagItem, false); + delete item.allChecked; + delete item.halfChecked; return; } if (tag && tag !== this.currentSelectTag) { this.scrollToTailFlag = false; - this.resetTreeRender(dropdown, tagItem, true); if (!isEqual(tag.value.value, tag.value.cache)) { tag.value.value = cloneDeep(tag.value.cache); - this.handleAccordingType(tag.type, tag.value.options); } + this.handleAccordingType(tag, dropdown, false); } else if (this.currentSelectTag) { + this.scrollToTailFlag = true; // checkbox 值不是必须数组，但重置时需空数组才能触发，undefined 不行 this.currentSelectTag.value.value = ['checkbox', ...this.valueIsArrayTypes].includes(this.currentSelectTag.type) ? [] : undefined; - this.resetTreeRender(dropdown, tagItem, true, true); - this.handleAccordingType(this.currentSelectTag.type, this.currentSelectTag.options); - this.scrollToTailFlag = true; + this.handleAccordingType(this.currentSelectTag, dropdown, true); } this.showNoDataTips = this.showSearchConfig.noCategoriesAvailableTip ? this.categoryDisplay.every((item) => item.isSelected) : false; } - resetTreeRender(dropdown: DropDownDirective, tag: any, flag: boolean, isCurrentSelectTag?: boolean) { + cacheTreeData(tag: ICategorySearchTagItem) { if (tag.type === 'treeSelect') { - setTimeout(() => { - this.treeResetFlag = isCurrentSelectTag ? false : flag; - if (!flag) { - this.treeSearch(''); - return; - } - if (tag.searchable) { - const dom = dropdown.menuEl.nativeElement.querySelector('.devui-search-container .devui-search>input'); - if (dom) { - dom.focus(); - } - } - }, this.DELAY); + // 下拉关闭时存储当前分类树的treeFactory + this.treeFactories[tag.field] = this.treeInstance.treeFactory; } } @@ -993,10 +989,29 @@ export class CategorySearchComponent implements OnChanges, OnDestroy, AfterViewI } } - handleAccordingType(type: string, options: any[]) { - switch (type) { + handleAccordingType(tag: ICategorySearchTagItem, dropdown: DropDownDirective, isCurrentSelectTag: boolean) { + switch (tag.type) { + case 'keyword': + this.searchKey = this.searchKeyCache; + this.searchKeyChangeEvent(this.searchKey); + this.inputEle.nativeElement.focus(); + dropdown.isOpen = false; + break; case 'treeSelect': - options = cloneDeep(options); + // 新选分类时使用原始tree数据，已选分类时使用空数据，待渲染后用存储数据覆盖 + if (!isCurrentSelectTag) { + setTimeout(() => { + // 下拉展开将存储的数据合并覆盖当前树实例，刷新当前树显示。 + merge(this.treeInstance.treeFactory, this.treeFactories[tag.field]); + this.treeSearch(''); + }); + } + setTimeout(() => { + const dom = tag.searchable && dropdown.menuEl.nativeElement.querySelector('.devui-search-container .devui-search>input'); + if (dom) { + dom.focus(); + } + }, this.DROPDOWN_ANIMATION_TIMEOUT); break; case 'textInput': setTimeout(() => { @@ -1006,6 +1021,12 @@ export class CategorySearchComponent implements OnChanges, OnDestroy, AfterViewI } }, this.DROPDOWN_ANIMATION_TIMEOUT); break; + case 'checkbox': + case 'label': + if (tag.showSelectAll) { + this.isSelectAll(tag, false); + } + break; default: } } @@ -1031,6 +1052,21 @@ export class CategorySearchComponent implements OnChanges, OnDestroy, AfterViewI return obj && obj[key]; } + selectAll(tag: ICategorySearchTagItem) { + tag.halfChecked = false; + if (tag.allChecked) { + tag.value.value = cloneDeep(tag.options); + } else { + tag.value.value = []; + } + } + + isSelectAll(tag: ICategorySearchTagItem, isValue = true) { + const value = isValue ? tag.value.value : tag.value.cache; + tag.allChecked = isEqual(value, tag.options); + tag.halfChecked = !tag.allChecked && !!value.length; + } + // textInput 文本输入框 处理选中项方法 getTextInputValue(tag: ICategorySearchTagItem) { this.afterDropdownClosed(); @@ -1040,10 +1076,18 @@ export class CategorySearchComponent implements OnChanges, OnDestroy, AfterViewI } // numberRange 数字范围 处理选中项方法 - getNumberRangeValue(tag: ICategorySearchTagItem) { - this.afterDropdownClosed(); + getNumberRangeValue(tag: ICategorySearchTagItem, dropdown?: DropDownDirective) { const startNum = tag.value.value[0] || 0; const endNum = tag.value.value[1] || 0; + if (tag.validateFunc) { + if (!tag.validateFunc(startNum, endNum, tag)) { + return; + } + if (dropdown) { + this.closeMenu(dropdown); + } + } + this.afterDropdownClosed(); tag.value.value = [startNum, endNum]; tag.value.cache = [startNum, endNum]; tag.value[tag.filterKey || 'label'] = `${startNum} - ${endNum}`; @@ -1064,17 +1108,17 @@ export class CategorySearchComponent implements OnChanges, OnDestroy, AfterViewI selectedIds.push(item[tag.treeNodeIdKey || 'id']); }); if (result.length) { - tag.value.options = isConfirm ? cloneDeep(tag.options) : this.initTreeChecked(tag, tag.options, selectedIds); tag.value.cache = cloneDeep(tag.value.value); tag.value[tag.filterKey || 'label'] = result.join(','); tag.title = this.setTitle(tag, 'treeSelect'); + if (isConfirm) { + this.cacheTreeData(tag); + this.updateSelectedTags(tag); + } else { + tag.options = this.initTreeChecked(tag, tag.options, selectedIds); + } } else { this.removeTag(tag); - return; - } - if (isConfirm) { - this.updateTreeChecked(tag, selectedIds); - this.updateSelectedTags(tag); } } @@ -1084,39 +1128,20 @@ export class CategorySearchComponent implements OnChanges, OnDestroy, AfterViewI } else if (tree) { const idKey = tag.treeNodeIdKey || 'id'; const childKey = tag.treeNodeChildrenKey || 'children'; - if (Array.isArray(tree[childKey])) { + if (Array.isArray(tree[childKey]) && ['upward', 'both', undefined].includes(tag.checkableRelation)) { let checkedChild = 0; tree[childKey] = this.initTreeChecked(tag, tree[childKey], selectedIds); tree[childKey].forEach((child) => child.isChecked && checkedChild++); tree.halfChecked = checkedChild > 0 && checkedChild < tree[childKey].length; tree.isChecked = checkedChild > 0 && !tree.halfChecked; - } else { - tree.isChecked = selectedIds.includes(tree[idKey]); + return tree; } + delete tree.halfChecked; + tree.isChecked = selectedIds.includes(tree[idKey]); return tree; } } - updateTreeChecked(tag: ICategorySearchTagItem, selectedIds: string[]) { - if (tag.multiple) { - const halfCheckedIds = []; - this.treeInstance.nodes.forEach((item) => item.data.halfChecked && halfCheckedIds.push(item.id)); - this.updateTreeData(tag, tag.value.options, selectedIds, halfCheckedIds); - } - } - - updateTreeData(tag: ICategorySearchTagItem, data: ITagOption[], selectedIds: string[], halfCheckedIds: string[]) { - data.forEach((item) => { - const itemId = item[tag.treeNodeIdKey || 'id']; - const childData = item[tag.treeNodeChildrenKey || 'children']; - item.isChecked = selectedIds.includes(itemId); - item.halfChecked = halfCheckedIds.includes(itemId); - if (childData && childData.length) { - this.updateTreeData(tag, childData, selectedIds, halfCheckedIds); - } - }); - } - onOperableNodeChecked(selectedNodes: ITreeItem[], tag: ICategorySearchTagItem) { const selectedValueExtractor = (nodes) => { return tag.leafOnly diff --git a/devui/category-search/category-search.type.ts b/devui/category-search/category-search.type.ts index d318f5ab..fc0394d0 100644 --- a/devui/category-search/category-search.type.ts +++ b/devui/category-search/category-search.type.ts @@ -65,6 +65,10 @@ export interface ICategorySearchTagItem { cache?: string | ITagOption | Array; [propName: string]: any; }; + /** + * checkbox | label 类型是否显示全选 + */ + showSelectAll?: boolean; /** * dateRange 类型是否显示时分秒 */ @@ -74,13 +78,37 @@ export interface ICategorySearchTagItem { */ activeRangeType?: 'start' | 'end'; /** - * textInput 类型设置最大长度 + * textInput | numberRange 类型设置最大长度，numberRange 需传入对象分别设置左右 + */ + maxLength?: number | { left?: number; right?: number }; + /** + * textInput | numberRange 类型设置占位符，numberRange 需传入对象分别设置左右 + */ + placeholder?: string | { left?: string; right?: string }; + /** + * numberRange 步进值，需传入对象分别设置左右 + */ + step?: { left?: number; right?: number }; + /** + * numberRange 最大值，需传入对象分别设置左右 + */ + max?: { left?: number; right?: number }; + /** + * numberRange 最小值，需传入对象分别设置左右 + */ + min?: { left?: number; right?: number }; + /** + * numberRange 限制输入的正则或正则字符串，需传入对象分别设置左右 + */ + reg?: { left?: RegExp | string; right?: RegExp | string }; + /** + * numberRange 限制小数点后的位数，需传入对象分别设置左右 */ - maxLength?: number; + decimalLimit?: { left?: number; right?: number }; /** - * textInput | numberRange 类型设置占位符，numberRange需传入对象分别设置左右 + * numberRange 校验方法，点击确定时执行，返回 true 通过 */ - placeholder?: string | { left: string; right: string }; + validateFunc?: (start: number, end: number, tag: ICategorySearchTagItem) => boolean; /** * treeSelect 类型是否为多选，并显示已选择列表 */ @@ -94,12 +122,13 @@ export interface ICategorySearchTagItem { */ searchPlaceholder?: string; /** - * treeSelect 类型自定义搜索方法，参数为搜索关键字和d-operable-tree组件实例 + * treeSelect 类型自定义搜索方法，参数为搜索关键字和 d-operable-tree 组件实例 */ searchFn?: (value: string, treeInstance: OperableTreeComponent) => boolean | Array; /** * treeSelect 类型相关配置，请参考treeSelect组件API中同名配置 */ + checkableRelation?: 'upward' | 'downward' | 'both' | 'none'; treeNodeIdKey?: string; treeNodeChildrenKey?: string; treeNodeTitleKey?: string; diff --git a/devui/category-search/demo/auto-scroll/auto-scroll.component.ts b/devui/category-search/demo/auto-scroll/auto-scroll.component.ts index 6df44c64..f9215c2e 100644 --- a/devui/category-search/demo/auto-scroll/auto-scroll.component.ts +++ b/devui/category-search/demo/auto-scroll/auto-scroll.component.ts @@ -100,11 +100,11 @@ export class AutoScrollComponent { }, }, { - label: 'IP address', - field: 'ip', + label: 'role', + field: 'role', value: { - ip: '110.110.110.3', - value: { ip: '110.110.110.3' }, + role: 'Guest', + value: { role: 'Guest' }, }, }, { diff --git a/devui/category-search/demo/category-search-demo.component.ts b/devui/category-search/demo/category-search-demo.component.ts index fe79eb99..43f7ac73 100644 --- a/devui/category-search/demo/category-search-demo.component.ts +++ b/devui/category-search/demo/category-search-demo.component.ts @@ -1,66 +1,66 @@ -import { Component, OnDestroy, OnInit } from "@angular/core"; -import { DevuiSourceData } from "ng-devui/shared/devui-codebox"; -import { TranslateService, TranslationChangeEvent } from "@ngx-translate/core"; -import { Subscription } from "rxjs"; +import { Component, OnDestroy, OnInit } from '@angular/core'; +import { DevuiSourceData } from 'ng-devui/shared/devui-codebox'; +import { TranslateService, TranslationChangeEvent } from '@ngx-translate/core'; +import { Subscription } from 'rxjs'; @Component({ - selector: "d-category-search-demo", - templateUrl: "./category-search-demo.component.html", + selector: 'd-category-search-demo', + templateUrl: './category-search-demo.component.html', }) export class CategorySearchDemoComponent implements OnInit, OnDestroy { basicSource: Array = [ { - title: "HTML", - language: "xml", - code: require("./basic/basic.component.html?raw"), + title: 'HTML', + language: 'xml', + code: require('./basic/basic.component.html?raw'), }, { - title: "TS", - language: "typescript", - code: require("./basic/basic.component.ts?raw"), + title: 'TS', + language: 'typescript', + code: require('./basic/basic.component.ts?raw'), }, { - title: "DATA", - language: "typescript", - code: require("./demo-data.ts?raw"), + title: 'DATA', + language: 'typescript', + code: require('./demo-data.ts?raw'), }, ]; extendSource: Array = [ { - title: "HTML", - language: "xml", - code: require("./extend/extend.component.html?raw"), + title: 'HTML', + language: 'xml', + code: require('./extend/extend.component.html?raw'), }, { - title: "TS", - language: "typescript", - code: require("./extend/extend.component.ts?raw"), + title: 'TS', + language: 'typescript', + code: require('./extend/extend.component.ts?raw'), }, { - title: "DATA", - language: "typescript", - code: require("./demo-data.ts?raw"), + title: 'DATA', + language: 'typescript', + code: require('./demo-data.ts?raw'), }, { - title: "SCSS", - language: "css", - code: require("./extend/extend.component.scss?raw"), + title: 'SCSS', + language: 'css', + code: require('./extend/extend.component.scss?raw'), }, ]; autoScrollSource: Array = [ { - title: "HTML", - language: "xml", - code: require("./auto-scroll/auto-scroll.component.html?raw"), + title: 'HTML', + language: 'xml', + code: require('./auto-scroll/auto-scroll.component.html?raw'), }, { - title: "TS", - language: "typescript", - code: require("./auto-scroll/auto-scroll.component.ts?raw"), + title: 'TS', + language: 'typescript', + code: require('./auto-scroll/auto-scroll.component.ts?raw'), }, { - title: "DATA", - language: "typescript", - code: require("./demo-data.ts?raw"), + title: 'DATA', + language: 'typescript', + code: require('./demo-data.ts?raw'), }, ]; navItems = []; @@ -68,17 +68,13 @@ export class CategorySearchDemoComponent implements OnInit, OnDestroy { constructor(private translate: TranslateService) {} ngOnInit() { this.subs.add( - this.translate - .get("components.category-search.anchorLinkValues") - .subscribe((res) => { + this.translate.get('components.category-search.anchorLinkValues').subscribe((res) => { this.setNavValues(res); }) ); this.subs.add( this.translate.onLangChange.subscribe((event: TranslationChangeEvent) => { - const values = this.translate.instant( - "components.category-search.anchorLinkValues" - ); + const values = this.translate.instant('components.category-search.anchorLinkValues'); this.setNavValues(values); }) ); @@ -90,18 +86,9 @@ export class CategorySearchDemoComponent implements OnInit, OnDestroy { } setNavValues(values) { this.navItems = [ - { - dAnchorLink: "basic-usage", - value: values["basicDemo"], - }, - { - dAnchorLink: "extend-template", - value: values["extendDemo"], - }, - { - dAnchorLink: "auto-scroll", - value: values["autoScrollDemo"], - }, + { dAnchorLink: 'basic-usage', value: values.basicDemo }, + { dAnchorLink: 'extend-template', value: values.extendDemo }, + { dAnchorLink: 'auto-scroll', value: values.autoScrollDemo }, ]; } } diff --git a/devui/category-search/demo/demo-data.ts b/devui/category-search/demo/demo-data.ts index 7adc1a40..8359a2ae 100644 --- a/devui/category-search/demo/demo-data.ts +++ b/devui/category-search/demo/demo-data.ts @@ -58,20 +58,20 @@ export const demoData: ICategorySearchTagItem[] = [ showTime: false, }, { - label: 'IP address', - field: 'ip', + label: 'role', + field: 'role', type: 'radio', group: 'User-defined', - filterKey: 'ip', + filterKey: 'role', options: [ { - ip: '110.110.110.1', + role: 'Admin', }, { - ip: '110.110.110.2', + role: 'User', }, { - ip: '110.110.110.3', + role: 'Guest', }, ], }, @@ -81,6 +81,7 @@ export const demoData: ICategorySearchTagItem[] = [ type: 'checkbox', group: 'Personnel-related', filterKey: 'name', + showSelectAll: true, options: [ { name: 'Jack', diff --git a/devui/category-search/doc/api-cn.md b/devui/category-search/doc/api-cn.md index e5290758..b8605d69 100644 --- a/devui/category-search/doc/api-cn.md +++ b/devui/category-search/doc/api-cn.md @@ -19,7 +19,7 @@ import { CategorySearchModule } from 'ng-devui/category-search'; | category | `ICategorySearchTagItem` | -- | 必选，传入分类搜索源数据 | [基本用法](demo#basic-usage) | | defaultSearchField | `String[]` | [] | 可选，配置输入关键字时可在哪些分类中筛选 | [基本用法](demo#basic-usage) | | selectedTags | `ICategorySearchTagItem` | -- | 可选，传入需要默认选中的分类数据 | [基本用法](demo#basic-usage) | -| placeholderText | `string` | -- | 可选， 自定义搜索输入框占位文字 | [基本用法](demo#basic-usage) | +| placeholderText | `string` | -- | 可选，自定义搜索输入框占位文字 | [基本用法](demo#basic-usage) | | ~~allowSave~~ | `boolean` | true | 可选，是否显示保存当前过滤的按钮 | [基本用法](demo#basic-usage) | | ~~allowClear~~ | `boolean` | true | 可选，是否显示清除当前过滤的按钮 | [基本用法](demo#basic-usage) | | ~~allowShowMore~~ | `boolean` | false | 可选，是否显示当前过滤条件下拉列表的按钮 | [大数据量优化展示](demo#auto-scroll) | @@ -29,6 +29,7 @@ import { CategorySearchModule } from 'ng-devui/category-search'; | beforeTagChange | `(tag, searchKey, operation) => boolean \| Promise \| Observable` | -- | 可选，改变标签前调用的方法，返回 boolean 类型，返回 false 可以阻止分类值改变 | | | toggleEvent | `(dropdown, tag?, currentSelectTag?) => void` | -- | 可选，已选分类的下拉菜单开关时调用的方法，可使用 return 阻止之后的默认方法执行 | [基本用法](demo#basic-usage) | | inputReadOnly | `boolean` | false | 可选，限制是否可通过搜索框输入关键字搜索,`true`则无法输入关键字，仅可根据提供的分类数据筛选 | | +| inputAutofocus | `boolean` | true | 可选，是否允许自动聚焦搜索框，规避有滚动条场景下自动聚焦导致的位移 | | | disabled | `boolean` | false | 可选，是否禁用分类搜索 | | | dropdownBoundary | `boolean` | false | 可选，限制已选分类下拉菜单的左右边界，避免分类显示过长导致下拉菜单出现在组件范围以外 | | | tagMaxWidth | `number` | -- | 可选，单个过滤条件的最大宽度，超过则显示省略号，不设置则不限制 | [大数据量优化展示](demo#auto-scroll) | @@ -101,6 +102,10 @@ export interface ICategorySearchTagItem { value: string | ITagOption | Array; // 下拉列表的选择值 cache: string | ITagOption | Array; // 下拉列表展开时用于重置选择值的缓存数据 }; + /** + * checkbox | label 类型是否显示全选 + */ + showSelectAll?: boolean; /** * dateRange 类型是否显示时分秒 */ @@ -110,13 +115,37 @@ export interface ICategorySearchTagItem { */ activeRangeType?: 'start' | 'end'; /** - * textInput 类型设置最大长度 + * textInput | numberRange 类型设置最大长度，numberRange 需传入对象分别设置左右 + */ + maxLength?: number | { left?: number; right?: number }; + /** + * textInput | numberRange 类型设置占位符，numberRange 需传入对象分别设置左右 + */ + placeholder?: string | { left?: string; right?: string }; + /** + * numberRange 步进值，需传入对象分别设置左右 + */ + step?: { left?: number; right?: number }; + /** + * numberRange 最大值，需传入对象分别设置左右 + */ + max?: { left?: number; right?: number }; + /** + * numberRange 最小值，需传入对象分别设置左右 + */ + min?: { left?: number; right?: number }; + /** + * numberRange 限制输入的正则或正则字符串，需传入对象分别设置左右 + */ + reg?: { left?: RegExp | string; right?: RegExp | string }; + /** + * numberRange 限制小数点后的位数，需传入对象分别设置左右 */ - maxLength?: number; + decimalLimit?: { left?: number; right?: number }; /** - * textInput | numberRange 类型设置占位符，numberRange需传入对象分别设置左右 + * numberRange 校验方法，点击确定时执行，返回 true 通过 */ - placeholder?: string | { left: string; right: string }; + validateFunc?: (start: number, end: number, tag: ICategorySearchTagItem) => boolean; /** * treeSelect 类型是否为多选，并显示已选择列表 */ @@ -130,12 +159,13 @@ export interface ICategorySearchTagItem { */ searchPlaceholder?: string; /** - * treeSelect 类型自定义搜索方法，参数为搜索关键字和d-operable-tree组件实例 + * treeSelect 类型自定义搜索方法，参数为搜索关键字和 d-operable-tree 组件实例 */ searchFn?: (value: string, treeInstance: OperableTreeComponent) => boolean | Array; /** * treeSelect 类型相关配置，请参考treeSelect组件API中同名配置 */ + checkableRelation?: 'upward' | 'downward' | 'both' | 'none'; treeNodeIdKey?: string; treeNodeChildrenKey?: string; treeNodeTitleKey?: string; diff --git a/devui/category-search/doc/api-en.md b/devui/category-search/doc/api-en.md index 2ee72ec0..b30784a7 100644 --- a/devui/category-search/doc/api-en.md +++ b/devui/category-search/doc/api-en.md @@ -28,6 +28,7 @@ In the page | beforeTagChange | `(tag, searchKey, operation) => boolean \| Promise \| Observable` | -- | Optional. Method called before changing the tag, returns the boolean type, and returns false to prevent the classification value from changing. | | | toggleEvent | `(dropdown, tag?, currentSelectTag?) => void` | -- | Optional. Method called when the drop-down menu switch of the selected classification is enabled, which can be executed by the default method after being blocked by return. | [Basic usage](demo#basic-usage) | | inputReadOnly | `boolean` | false | Optional. Specifies whether to enter keywords in the search box. If it is `true`, you cannot enter keywords and can only filter data based on the provided classification data. | [Basic usage](demo#basic-usage) | +| inputAutofocus | `boolean` | true | Optional. Indicates whether to allow the auto-focus search box to avoid displacement caused by auto-focus in the scenario with a scroll bar. | | | disabled | `boolean` | false | Optional. indicating whether to disable the category search component. | | | dropdownBoundary | `boolean` | false | Optional. Limit left and right boundaries of the selected category dropdown to prevent it from being displayed out of category-search component. | | | tagMaxWidth | `number` | -- | Optional. Maximum width of a single filter criterion. If the width exceeds the value, an ellipsis is displayed. If this parameter is not set, no restriction is imposed. | | @@ -100,6 +101,10 @@ export interface ICategorySearchTagItem { value: string | ITagOption | Array; // Selected value from the drop-down list box cache: string | ITagOption | Array; // Cached data used to reset the selection value when the drop-down list expands }; + /** + * checkbox | Indicates whether to display the select-all checkbox. + */ + showSelectAll?: boolean; /** * Indicates whether to display hour, minute, and second for the dateRange type. */ @@ -109,13 +114,37 @@ export interface ICategorySearchTagItem { */ activeRangeType?: 'start' | 'end'; /** - * Set the maximum length of the textInput type. + * Set the maximum length for the textInput or numberRange type. The numberRange needs to be passed to the left and right of the object. */ - maxLength?: number; + maxLength?: number | { left?: number; right?: number }; /** * Sets a placeholder for the textInput or numberRange type. The numberRange needs to be passed to the left and right of the object. */ - placeholder?: string | { left: string; right: string }; + placeholder?: string | { left?: string; right?: string }; + /** + * Sets the numberRange step value. The left and right values need to be set for the input object. + */ + step?: { left?: number; right?: number }; + /** + * Sets the maximum value of numberRange. The left and right values need to be set for the input object. + */ + max?: { left?: number; right?: number }; + /** + * Sets the minimum value of numberRange. The object needs to be input and the left and right sides need to be set. + */ + min?: { left?: number; right?: number }; + /** + * Regular expression or regular character string that restricts the numberRage value. The object needs to be input and the left and right sides need to be set. + */ + reg?: { left?: RegExp | string; right?: RegExp | string }; + /** + * Limit the number of decimal places. The object needs to be input and the left and right sides need to be set. + */ + decimalLimit?: { left?: number; right?: number }; + /** + * numberRange verification method, which is executed when OK is clicked. If true is returned, the verification is passed. + */ + validateFunc?: (start: number, end: number, tag: ICategorySearchTagItem) => boolean; /** * Sets whether the treeSelect type is multi-select and displays the selected list. */ @@ -135,6 +164,7 @@ export interface ICategorySearchTagItem { /** * Sets the treeSelect type. For details, see the configuration of the same name in the tree-select component API. */ + checkableRelation?: 'upward' | 'downward' | 'both' | 'none'; treeNodeIdKey?: string; treeNodeChildrenKey?: string; treeNodeTitleKey?: string; diff --git a/devui/checkbox/checkbox-group.component.ts b/devui/checkbox/checkbox-group.component.ts index e6574a99..ffc7b153 100755 --- a/devui/checkbox/checkbox-group.component.ts +++ b/devui/checkbox/checkbox-group.component.ts @@ -19,7 +19,6 @@ import { Observable } from 'rxjs'; }) export class CheckBoxGroupComponent implements OnChanges, ControlValueAccessor { static ID_SEED = 0; - @Input() name: string; @Input() itemWidth: number; @Input() color; @@ -36,9 +35,11 @@ export class CheckBoxGroupComponent implements OnChanges, ControlValueAccessor { options_display = []; private onChange = (_: any) => null; private onTouch = () => null; + constructor(private devConfigService: DevConfigService) {} + ngOnChanges(changes: SimpleChanges) { - if (changes['options']) { + if (changes.options) { this.values = this.values ?? []; this.checkType(); } @@ -56,15 +57,15 @@ export class CheckBoxGroupComponent implements OnChanges, ControlValueAccessor { } }); this.options.forEach((item) => { - const option = { isChecked: false }; - option['value'] = item; + const option: any = { isChecked: false }; + option.value = item; if (this.filterKey && item[this.filterKey]) { if (checkedArray[item[this.filterKey]] === true) { - option['isChecked'] = true; + option.isChecked = true; } } else { if (checkedArray[item] === true) { - option['isChecked'] = true; + option.isChecked = true; } } this.options_display.push(option); diff --git a/devui/common/common.spec.ts b/devui/common/common.spec.ts index 8707d73a..18c0ef7e 100644 --- a/devui/common/common.spec.ts +++ b/devui/common/common.spec.ts @@ -1,6 +1,6 @@ import { CommonModule } from '@angular/common'; -import { HttpClient, HttpClientModule } from '@angular/common/http'; -import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing'; +import { HttpClient, provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'; +import { HttpTestingController, provideHttpClientTesting } from '@angular/common/http/testing'; import { AfterViewInit, Component, DebugElement, ElementRef } from '@angular/core'; import { ComponentFixture, TestBed } from '@angular/core/testing'; import { FormsModule } from '@angular/forms'; @@ -15,7 +15,7 @@ import { IframeEventPropagateDirective } from './iframe-event-propagate.directiv @Component({ template: ` - + `, }) @@ -23,7 +23,7 @@ class TestSimulateTagComponent { target = '_blank'; goto() { - HelperUtils.jumpOuterUrl('https://angular.io'); + HelperUtils.jumpOuterUrl('//angular.io'); } } @@ -234,9 +234,10 @@ describe('download file', () => { beforeEach(() => { TestBed.configureTestingModule({ - imports: [CommonModule, DCommonModule, HttpClientModule, HttpClientTestingModule], - declarations: [TestDownloadComponent], - }); + declarations: [TestDownloadComponent], + imports: [CommonModule, DCommonModule], + providers: [provideHttpClient(withInterceptorsFromDi()), provideHttpClientTesting()] +}); fixture = TestBed.createComponent(TestDownloadComponent); component = fixture.debugElement.componentInstance; diff --git a/devui/common/demo/common-demo.component.ts b/devui/common/demo/common-demo.component.ts index 81e09d88..5971a17c 100644 --- a/devui/common/demo/common-demo.component.ts +++ b/devui/common/demo/common-demo.component.ts @@ -56,6 +56,7 @@ export class CommonDemoComponent implements OnInit, OnDestroy { navItems = []; subs: Subscription = new Subscription(); + constructor(private translate: TranslateService) {} ngOnInit() { @@ -81,8 +82,8 @@ export class CommonDemoComponent implements OnInit, OnDestroy { { dAnchorLink: 'open-url', value: values['open-url'] }, { dAnchorLink: 'download-file', value: values['download-file'] }, { dAnchorLink: 'iframe-propagate', value: values['iframe-propagate'] }, - { dAnchorLink: 'clipboard', value: values['clipboard'] }, - { dAnchorLink: 'shapeIconHoverable', value: values['shapeIconHoverable'] }, + { dAnchorLink: 'clipboard', value: values.clipboard }, + { dAnchorLink: 'shapeIconHoverable', value: values.shapeIconHoverable }, { dAnchorLink: 'lazy-load', value: values['lazy-load'] }, ]; } diff --git a/devui/common/demo/common-demo.module.ts b/devui/common/demo/common-demo.module.ts index 85c5e70f..35b75e72 100644 --- a/devui/common/demo/common-demo.module.ts +++ b/devui/common/demo/common-demo.module.ts @@ -1,5 +1,5 @@ import { CommonModule } from '@angular/common'; -import { HttpClientModule } from '@angular/common/http'; +import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { RouterModule } from '@angular/router'; @@ -28,53 +28,47 @@ import { SafeNullPipeComponent } from './pipe/safe-null-pipe/safe-null-pipe.comp import { ShapeIconHoverableDemoComponent } from "./shapeIconHoverable/shapeIconHoverable.component"; import { PopoverModule } from "ng-devui"; -@NgModule({ - imports: [ - TranslateModule, - CommonModule, - FormsModule, - HttpClientModule, - ButtonModule, - DevUICodeboxModule, - DevUIApiModule, - DCommonModule, - DDemoNavModule, - LazyLoadModule, - LoadingModule, - I18nModule, - DataTableModule, - TextInputModule, - PopoverModule, - RouterModule.forChild([ - { path: '', redirectTo: 'demo', pathMatch: 'full' }, - { - path: 'design', - component: CommonDesignComponent, - }, - { path: 'demo', component: CommonDemoComponent }, - { - path: 'api', - component: DevUIApiComponent, - data: { - 'zh-cn': require('!html-loader!markdown-loader!../doc/api-cn.md'), - 'en-us': require('!html-loader!markdown-loader!../doc/api-en.md'), - }, - }, - ]), - ], - exports: [CommonDemoComponent], - declarations: [ - DatePipeDemoComponent, - CommonDemoComponent, - CommonDesignComponent, - HelperBrowserComponent, - HelperJumpDemoComponent, - HelperDownloadDemoComponent, - IframPropagateDemoComponent, - LazyLoadComponent, - ClipboardDemoComponent, - SafeNullPipeComponent, - ShapeIconHoverableDemoComponent, - ], -}) +@NgModule({ exports: [CommonDemoComponent], + declarations: [ + DatePipeDemoComponent, + SafeNullPipeComponent, + CommonDemoComponent, + CommonDesignComponent, + HelperBrowserComponent, + HelperJumpDemoComponent, + HelperDownloadDemoComponent, + IframPropagateDemoComponent, + LazyLoadComponent, + ClipboardDemoComponent, + ShapeIconHoverableDemoComponent + ], imports: [TranslateModule, + CommonModule, + FormsModule, + ButtonModule, + DevUICodeboxModule, + DevUIApiModule, + DCommonModule, + DDemoNavModule, + LazyLoadModule, + LoadingModule, + I18nModule, + DataTableModule, + TextInputModule, + PopoverModule, + RouterModule.forChild([ + { path: '', redirectTo: 'demo', pathMatch: 'full' }, + { + path: 'design', + component: CommonDesignComponent, + }, + { path: 'demo', component: CommonDemoComponent }, + { + path: 'api', + component: DevUIApiComponent, + data: { + 'zh-cn': require('!html-loader!markdown-loader!../doc/api-cn.md'), + 'en-us': require('!html-loader!markdown-loader!../doc/api-en.md'), + }, + }, + ])], providers: [provideHttpClient(withInterceptorsFromDi())] }) export class CommonDemoModule {} diff --git a/devui/common/demo/helper-jump/helper-jump.component.html b/devui/common/demo/helper-jump/helper-jump.component.html index 10f7190b..4c2cd418 100644 --- a/devui/common/demo/helper-jump/helper-jump.component.html +++ b/devui/common/demo/helper-jump/helper-jump.component.html @@ -1,10 +1,8 @@ -
+
Using Function: - Open Angualr website + Open Angular website
-
+
Using Directive: - - Open Angualr website - + Open Angular website
diff --git a/devui/common/demo/helper-jump/helper-jump.component.ts b/devui/common/demo/helper-jump/helper-jump.component.ts index 998bee02..f42330e5 100644 --- a/devui/common/demo/helper-jump/helper-jump.component.ts +++ b/devui/common/demo/helper-jump/helper-jump.component.ts @@ -7,9 +7,8 @@ import { HelperUtils } from 'ng-devui/common'; }) export class HelperJumpDemoComponent { downError: string; - constructor() {} goto() { - HelperUtils.jumpOuterUrl('https://angular.io'); + HelperUtils.jumpOuterUrl('//angular.io'); } } diff --git a/devui/common/helper-utils.ts b/devui/common/helper-utils.ts index f74ab50b..716835df 100755 --- a/devui/common/helper-utils.ts +++ b/devui/common/helper-utils.ts @@ -10,7 +10,7 @@ const enum Browser { Chrome = 'Chrome', Safari = 'Safari', Other = 'Other', -}; +} declare type HttpObserve = 'body' | 'events' | 'response'; declare type ResponseType = 'arraybuffer' | 'blob' | 'json' | 'text'; export class HelperUtils { @@ -30,29 +30,19 @@ export class HelperUtils { private static getBrowserInfo() { if (typeof navigator !== 'undefined') { const ua = navigator.userAgent.toLowerCase(); - const isIE = ua.match(/rv:([\d.]+)\) like gecko/) || ua.match(/msie ([\d\.]+)/); - const isClassicEdge = ua.match(/edge\/([\d\.]+)/); - const isFirefox = ua.match(/firefox\/([\d\.]+)/); - const isOpera = ua.match(/(?:opera|opr).([\d\.]+)/); - const isEdge = ua.match(/edg\/([\d\.]+)/); - const isChrome = ua.match(/chrome\/([\d\.]+)/); - const isSafari = ua.match(/version\/([\d\.]+).*safari/); - const infos = isIE || isClassicEdge || isFirefox || isOpera || isEdge || isChrome || isSafari; - this._browserName = isIE - ? Browser.IE - : isClassicEdge - ? Browser.ClassicEdge - : isFirefox - ? Browser.Firefox - : isOpera - ? Browser.Opera - : isEdge - ? Browser.Edge - : isChrome - ? Browser.Chrome - : isSafari - ? Browser.Safari - : Browser.Other; + const results = [ + ua.match(/rv:([\d.]+)\) like gecko/) || ua.match(/msie ([\d\.]+)/), + ua.match(/edge\/([\d\.]+)/), + ua.match(/firefox\/([\d\.]+)/), + ua.match(/(?:opera|opr).([\d\.]+)/), + ua.match(/edg\/([\d\.]+)/), + ua.match(/chrome\/([\d\.]+)/), + ua.match(/version\/([\d\.]+).*safari/), + ]; + const index = results.findIndex((item) => item); + const infos = results[index]; + const browserNames = [Browser.IE, Browser.ClassicEdge, Browser.Firefox, Browser.Opera, Browser.Edge, Browser.Chrome, Browser.Safari]; + this._browserName = browserNames[index] || Browser.Other; this._browserVersion = infos ? parseInt(infos[1], 10) : 0; } } @@ -60,7 +50,7 @@ export class HelperUtils { static jumpOuterUrl(url, target = '_blank') { if (url !== undefined && typeof document !== 'undefined') { const tempLink = document.createElement('a'); - tempLink.style.display = 'none'; // for IE 11 + tempLink.style.display = 'none'; // for IE 11 tempLink.target = target; tempLink.href = url; document.body.appendChild(tempLink); // for IE 11, IE11需要append到document.body里面的a链接才会生效 @@ -74,9 +64,9 @@ export class HelperUtils { static downloadFile( url: string, option?: { - method?: 'POST'| 'GET' | 'post' | 'get'; - params?: {[property: string]: string}; - enctype?: 'application/x-www-form-urlencoded' | 'multipart/form-data'| 'text/plain'; + method?: 'POST' | 'GET' | 'post' | 'get'; + params?: { [property: string]: string }; + enctype?: 'application/x-www-form-urlencoded' | 'multipart/form-data' | 'text/plain'; iframename?: string; }, onError?: (response) => void @@ -84,22 +74,22 @@ export class HelperUtils { if (typeof document === 'undefined') { return; } - if (document.querySelector('iframe[name=' + (option && option.iframename || 'download') + ']')) { - document.body.removeChild(document.querySelector('iframe[name=' + (option && option.iframename || 'download') + ']')); + if (document.querySelector(`iframe[name='${option?.iframename || 'download'}]`)) { + document.body.removeChild(document.querySelector(`iframe[name='${option?.iframename || 'download'}]`)); } const tempiframe = document.createElement('iframe'); - tempiframe.name = option && option.iframename || 'download'; + tempiframe.name = (option && option.iframename) || 'download'; tempiframe.style.display = 'none'; const tempform = document.createElement('form'); tempform.action = url; - tempform.method = option && option.method || 'post'; - tempform.target = option && option.iframename || 'download'; - tempform.enctype = option && option.enctype || 'application/x-www-form-urlencoded'; + tempform.method = (option && option.method) || 'post'; + tempform.target = (option && option.iframename) || 'download'; + tempform.enctype = (option && option.enctype) || 'application/x-www-form-urlencoded'; tempform.style.display = 'none'; if (option && option.params) { - Object.keys(option.params).forEach(key => { + Object.keys(option.params).forEach((key) => { const opt = document.createElement('input'); opt.name = key; opt.value = option.params[key]; @@ -117,7 +107,7 @@ export class HelperUtils { // 下载错误处理。下载成功并不会响应，因为响应头中带有Content-Disposition（下载头）的url，无法监听iframe的load事件，load事件不会触发 tempiframe.addEventListener('load', (event) => { try { - const iframeDoc = tempiframe.contentDocument; + const iframeDoc = tempiframe.contentDocument; if (onError !== undefined) { let response; try { @@ -143,12 +133,14 @@ export class HelperUtils { url: string, option?: { method?: 'POST' | 'GET' | 'post' | 'get'; - params?: {[property: string]: string}; + params?: { [property: string]: string }; enctype?: 'application/x-www-form-urlencoded' | 'multipart/form-data' | 'text/plain'; header?: { [header: string]: string | string[]; }; + observe?: 'events' | 'response'; responseOption?: 'response' | 'body' | 'json'; + responseType?: 'blob' | 'arraybuffer'; reportProgress?: boolean; filename?: string; withCredentials?: boolean; @@ -156,14 +148,15 @@ export class HelperUtils { }, onError?: (response) => void, onSuccess?: (response) => void, - onProgress?: (response) => void, + onProgress?: (response) => void ) { - - const requestMethod = option && option.method && option.method.toLowerCase() || 'post'; + const requestMethod = (option && option.method && option.method.toLowerCase()) || 'post'; const requestHeaderContentType = option.enctype || 'application/x-www-form-urlencoded'; - const requestParams = option.params ? new HttpParams({ - fromObject: option.params - }) : null; + const requestParams = option.params + ? new HttpParams({ + fromObject: option.params, + }) + : null; const requestUrl = url; const requestOptionParams = requestMethod === 'get' ? requestParams : undefined; @@ -171,21 +164,25 @@ export class HelperUtils { const responseOption = option.responseOption; /* eslint-disable-next-line prefer-object-spread */ - const requestOption = Object.assign({}, { - body: requestBody, - observe: (option.reportProgress ? 'events' : 'response') as HttpObserve, - params: requestOptionParams, - headers: { - 'Content-Type': requestHeaderContentType + const requestOption = Object.assign( + {}, + { + body: requestBody, + observe: (option.observe || option.reportProgress ? 'events' : 'response') as HttpObserve, + params: requestOptionParams, + headers: { + 'Content-Type': requestHeaderContentType, + }, + withCredentials: option.withCredentials, + reportProgress: option.reportProgress, + responseType: (option.responseType || option.reportProgress ? 'blob' : 'arraybuffer') as ResponseType, }, - withCredentials: option.withCredentials, - reportProgress: option.reportProgress, - responseType: (option.reportProgress ? 'blob' : 'arraybuffer') as ResponseType - }, { - headers: option.header - }); + { + headers: option.header, + } + ); - const handleResponse = (resOption => { + const handleResponse = ((resOption) => { switch (resOption) { case 'response': return (res: HttpResponse) => res; @@ -224,12 +221,14 @@ export class HelperUtils { if (typeof document === 'undefined' || typeof window === 'undefined') { return; } - if (window.navigator && window.navigator['msSaveOrOpenBlob']) { // IE11 support - const blob = new Blob([data], {type: contentType}); - window.navigator['msSaveOrOpenBlob'](blob, filename); - } else {// other browsers + if ((window.navigator as any)?.msSaveOrOpenBlob) { + // IE11 support + const blob = new Blob([data], { type: contentType }); + (window.navigator as any).msSaveOrOpenBlob(blob, filename); + } else { + // other browsers if ('download' in document.createElement('a')) { - const blob = new Blob([data], {type: contentType}); + const blob = new Blob([data], { type: contentType }); const link = document.createElement('a'); link.href = URL.createObjectURL(blob); link.download = filename; @@ -239,7 +238,7 @@ export class HelperUtils { URL.revokeObjectURL(link.href); } else { // not support tag a download attribute use file download, filename won't support - const file = new File([data], filename, {type: contentType}); + const file = new File([data], filename, { type: contentType }); const exportUrl = URL.createObjectURL(file); window.location.assign(exportUrl); URL.revokeObjectURL(exportUrl); @@ -248,7 +247,10 @@ export class HelperUtils { }; const getFilenameFromDisposition = (disposition: string) => { - const filenamePair = disposition.split(';').filter(str => /^filename=/.test(str.trim())).pop(); + const filenamePair = disposition + .split(';') + .filter((str) => /^filename=/.test(str.trim())) + .pop(); if (filenamePair) { let str = filenamePair.trim(); str = str.split('=')[1]; @@ -259,45 +261,48 @@ export class HelperUtils { } }; - const subscriber = httpClient.request(requestMethod, requestUrl, requestOption).subscribe((res: HttpEvent) => { - if (res.type === HttpEventType.DownloadProgress) { - if (onProgress) { - onProgress(res); - } - } else if (res.type === HttpEventType.Response) { - const httpResponse = res as HttpResponse; - const disposition = (httpResponse.headers).get('content-disposition'); - const contentType = (httpResponse.headers).get('content-type'); - - if (/^attachment/i.test(disposition) || option.downloadWithoutDispositionHeader) { - const downloadFilename = option.filename || disposition && getFilenameFromDisposition(disposition) || url ; - downloadFileFromArrayBuffer(httpResponse.body, downloadFilename, contentType); - if (onSuccess) { - onSuccess(httpResponse); + const subscriber = httpClient.request(requestMethod, requestUrl, requestOption).subscribe( + (res: HttpEvent) => { + if (res.type === HttpEventType.DownloadProgress) { + if (onProgress) { + onProgress(res); } - } else { - if (onError) { - let response; - try { - response = handleResponse(httpResponse); - } catch (e) { - response = httpResponse; + } else if (res.type === HttpEventType.Response) { + const httpResponse = res as HttpResponse; + const disposition = (httpResponse.headers).get('content-disposition'); + const contentType = (httpResponse.headers).get('content-type'); + + if (/^attachment/i.test(disposition) || option.downloadWithoutDispositionHeader) { + const downloadFilename = option.filename || (disposition && getFilenameFromDisposition(disposition)) || url; + downloadFileFromArrayBuffer(httpResponse.body, downloadFilename, contentType); + if (onSuccess) { + onSuccess(httpResponse); + } + } else { + if (onError) { + let response; + try { + response = handleResponse(httpResponse); + } catch (e) { + response = httpResponse; + } + onError(response); } - onError(response); } } - } - }, err => { - if (onError) { - let response; - try { - response = handleResponse(err); - } catch (e) { - response = err; + }, + (err) => { + if (onError) { + let response; + try { + response = handleResponse(err); + } catch (e) { + response = err; + } + onError(response); } - onError(response); } - }); + ); return subscriber; } @@ -322,11 +327,11 @@ export class HelperUtils { } @Directive({ - selector: '[dSimulateATag]' + selector: '[dSimulateATag]', }) export class SimulateATagDirective { @Input() href: string; - @Input() target: '_blank' | '_self' | '_parent' | '_top' | string = '_blank'; + @Input() target: '_blank' | '_self' | '_parent' | '_top' | string = '_blank'; constructor() {} @HostListener('click') onClick() { HelperUtils.jumpOuterUrl(this.href, this.target); diff --git a/devui/common/iframe-event-propagate.directive.ts b/devui/common/iframe-event-propagate.directive.ts index e91b919c..aa910bda 100755 --- a/devui/common/iframe-event-propagate.directive.ts +++ b/devui/common/iframe-event-propagate.directive.ts @@ -1,7 +1,7 @@ import { DOCUMENT } from '@angular/common'; import { AfterViewInit, Directive, ElementRef, Inject, Input } from '@angular/core'; @Directive({ - selector: '[dIframeEventPropagate]' + selector: '[dIframeEventPropagate]', }) export class IframeEventPropagateDirective implements AfterViewInit { @Input() event = 'click'; @@ -25,7 +25,7 @@ export class IframeEventPropagateDirective implements AfterViewInit { if (iframe.contentDocument !== null) { iframe.contentDocument.addEventListener(this.event, this.dispatchClickEvent); } else { - const loadHandler = () => { + const loadHandler = () => { iframe.contentDocument.addEventListener(this.event, this.dispatchClickEvent); iframe.removeEventListener('load', loadHandler); }; @@ -37,9 +37,9 @@ export class IframeEventPropagateDirective implements AfterViewInit { }; dispatchClickEvent = ($event) => { - const event = this.document.createEvent('MouseEvents'); + const event: any = this.document.createEvent('MouseEvents'); event.initEvent(this.event, true, true); - event['originEvent'] = $event; + event.originEvent = $event; this.element.dispatchEvent(event); }; } diff --git a/devui/dashboard/dashboard.component.ts b/devui/dashboard/dashboard.component.ts index 241f5b75..416c6062 100644 --- a/devui/dashboard/dashboard.component.ts +++ b/devui/dashboard/dashboard.component.ts @@ -137,7 +137,7 @@ export class DashboardComponent implements OnChanges, AfterViewInit, OnDestroy { this.renderedWidgets = this.widgetComponents.toArray(); setTimeout(() => { this.renderedWidgets.forEach((widget) => - widget.handleChange(this.addGridStackNodeCompatible(widget.elem.nativeElement['gridstackNode'])) + widget.handleChange(this.addGridStackNodeCompatible(widget.elem.nativeElement.gridstackNode)) ); }); this.widgetComponents.changes.subscribe((changes) => { @@ -223,7 +223,7 @@ export class DashboardComponent implements OnChanges, AfterViewInit, OnDestroy { if (!this.gridStack) { return; } - if (!this.gridStack['_oneColumnMode']) { + if (!(this.gridStack as any)._oneColumnMode) { setTimeout(() => { const all = items.map((item) => ({ node: this.addGridStackNodeCompatible(item), diff --git a/devui/dashboard/grid-stack.service.ts b/devui/dashboard/grid-stack.service.ts index 8ffd106a..bb352c9e 100644 --- a/devui/dashboard/grid-stack.service.ts +++ b/devui/dashboard/grid-stack.service.ts @@ -12,7 +12,7 @@ export class GridStackService { lastStyleSheet: CSSStyleSheet; getDD() { - return (DDGridStack.get() as DDGridStack); + return DDGridStack.get() as DDGridStack; } static cleanDragIn(el: HTMLElement) { @@ -52,8 +52,10 @@ export class GridStackService { } _itemRemoving = (el: GridItemHTMLElement, remove: boolean) => { const node = el ? el.gridstackNode : undefined; - if (!node || !node.grid) { return; } - remove ? node['_isAboutToRemove'] = true : delete node['_isAboutToRemove']; + if (!node || !node.grid) { + return; + } + remove ? ((node as any)._isAboutToRemove = true) : delete (node as any)._isAboutToRemove; remove ? el.classList.add('grid-stack-item-removing') : el.classList.remove('grid-stack-item-removing'); }; resetAcceptWidget(dashboard: DashboardComponent) { @@ -72,14 +74,18 @@ export class GridStackService { accept: (el: GridItemHTMLElement) => { const node: GridStackNode = el.gridstackNode; // set accept drop to true on ourself (which we ignore) so we don't get "can't drop" icon in HTML5 mode while moving - if (node && node.grid === that) { return true; } - if (!that.opts.acceptWidgets) { return false; } + if (node && node.grid === that) { + return true; + } + if (!that.opts.acceptWidgets) { + return false; + } // check for accept method or class matching let canAccept = true; if (typeof that.opts.acceptWidgets === 'function') { canAccept = that.opts.acceptWidgets(el); } else { - const selector = (that.opts.acceptWidgets === true ? '.grid-stack-item' : that.opts.acceptWidgets as string); + const selector = that.opts.acceptWidgets === true ? '.grid-stack-item' : (that.opts.acceptWidgets as string); canAccept = el.matches(selector); } // finally check to make sure we actually have space left #1571 @@ -95,10 +101,10 @@ export class GridStackService { .off(this.gridStack.el, 'dropout') .on(this.gridStack.el, 'dropout', (event, el: GridItemHTMLElement, helper) => { // 覆盖这个方法是因为 float模式下 dropout影响了原来的布局 - const that = this.gridStack; + const that: any = this.gridStack; const node = el.gridstackNode; if (!node.grid || node.grid === that) { - that['_leave'](el, helper); + that._leave(el, helper); } this.getDD().off(el, 'drag'); return false; @@ -106,24 +112,27 @@ export class GridStackService { .off(this.gridStack.el, 'drop') .on(this.gridStack.el, 'drop', (event, el: GridItemHTMLElement, helper: GridItemHTMLElement) => { // 覆盖这个方法是因为 drop的情况不想让它放进去而是只发射通知 - const that = this.gridStack; + const that: any = this.gridStack; const node: GridStackNode = el.gridstackNode; - if (node && node.grid === that && !node['_isExternal']) { return false; } + if (node && node.grid === that && !(node as any)._isExternal) { + return false; + } - const wasAdded = !!that['placeholder'].parentElement; - that['placeholder'].remove(); + const wasAdded = !!that.placeholder.parentElement; + that.placeholder.remove(); - const origNode = el['_gridstackNodeOrig']; - delete el['_gridstackNodeOrig']; + const origNode = (el as any)._gridstackNodeOrig; + delete (el as any)._gridstackNodeOrig; - if (!node) { return false; } + if (!node) { + return false; + } if (wasAdded) { that.engine.cleanupNode(node); // 好像没用 node.grid = that; } - if (helper !== el) { helper.remove(); el.gridstackNode = origNode; // original item (left behind) is re-stored to pre dragging as the node now has drop info @@ -134,7 +143,7 @@ export class GridStackService { this.getDD().off(el, 'drag'); that.engine.removeNode(node); - that['_updateContainerHeight'](); + that._updateContainerHeight(); dashboard.handleDragInNode(node, origNode, this.dragInWidget); }); @@ -198,7 +207,8 @@ export class GridStackService { return; } const trashEl = trashZone; - this.getDD().droppable(trashEl, this.gridStack.opts.removableOptions) + this.getDD() + .droppable(trashEl, this.gridStack.opts.removableOptions) .on(trashEl, 'dropover', (event, el) => this._itemRemoving(el, true)) .on(trashEl, 'dropout', (event, el) => this._itemRemoving(el, false)); } @@ -221,7 +231,7 @@ export class GridStackService { if (this.gridStack) { if (!this.lastStyleSheet) { this.lastStyleSheet = Utils.createStylesheet( - 'd-dashboard-' + this.gridStack.opts['_styleSheetClass'], + `d-dashboard-${(this.gridStack.opts as any)._styleSheetClass}`, this.gridStack.el.parentElement ); } else { @@ -232,7 +242,7 @@ export class GridStackService { const marginUnit = this.gridStack.opts.marginUnit; const cellHeight = this.gridStack.opts.cellHeight as number; const cellHeightUnit = this.gridStack.opts.cellHeightUnit; - const prefix = `.${this.gridStack.opts['_styleSheetClass']}`; + const prefix = `.${(this.gridStack.opts as any)._styleSheetClass}`; if (!this.lastStyleSheet) { return; } @@ -269,7 +279,7 @@ export class GridStackService { removeBackgroundGridBlockStyleSheet() { if (this.lastStyleSheet) { - Utils.removeStylesheet('d-dashboard-' + this.gridStack.opts['_class']); + Utils.removeStylesheet(`d-dashboard-${(this.gridStack.opts as any)._class}`); } } } diff --git a/devui/dashboard/polyfill.ts b/devui/dashboard/polyfill.ts index 191234f8..c2083115 100644 --- a/devui/dashboard/polyfill.ts +++ b/devui/dashboard/polyfill.ts @@ -1,8 +1,9 @@ /* eslint-disable */ // Source: https://github.com/jserz/js_piece/blob/master/DOM/ParentNode/append()/append().md -export default (function (arr) { - arr.forEach(function (item) { - if (Object.prototype.hasOwnProperty.call(item,'append')) { +export default ((...rest) => { + const arr = rest[0]; + arr.forEach((item) => { + if (Object.prototype.hasOwnProperty.call(item, 'append')) { return; } Object.defineProperty(item, 'append', { @@ -10,16 +11,16 @@ export default (function (arr) { enumerable: true, writable: true, value: function append() { - const argArr = Array.prototype.slice.call(arguments); + const argArr = [...rest]; const docFrag = document.createDocumentFragment(); - argArr.forEach(function (argItem) { + argArr.forEach((argItem) => { const isNode = argItem instanceof Node; docFrag.appendChild(isNode ? argItem : document.createTextNode(String(argItem))); }); this.appendChild(docFrag); - } + }, }); }); })([Element.prototype, Document.prototype, DocumentFragment.prototype]); diff --git a/devui/data-table/data-table-body.component.ts b/devui/data-table/data-table-body.component.ts index f354b817..049c7701 100755 --- a/devui/data-table/data-table-body.component.ts +++ b/devui/data-table/data-table-body.component.ts @@ -8,7 +8,6 @@ import { DataTableColumnTmplComponent } from './tmpl/data-table-column-tmpl.comp templateUrl: './data-table-body.component.html', styleUrls: ['./data-table-body.component.scss'], preserveWhitespaces: false, - // changeDetection: ChangeDetectionStrategy.OnPush }) export class DataTableBodyComponent implements OnChanges { @Input() checkable: boolean; @@ -31,12 +30,11 @@ export class DataTableBodyComponent implements OnChanges { @Input() headerExpandConfig: TableExpandConfig; @Input() generalRowHoveredData: boolean; childTdColspan: number; - constructor(@Inject(DATA_TABLE) public dt: any) { - } + constructor(@Inject(DATA_TABLE) public dt: any) {} ngOnChanges(changes: SimpleChanges): void { - if (changes['columns'] && this.columns) { + if (changes.columns && this.columns) { let columnSpan = this.columns.length; if (this.showExpandToggle) { columnSpan += 1; diff --git a/devui/data-table/data-table-cell.component.ts b/devui/data-table/data-table-cell.component.ts index c5c77ba5..aa756aa1 100755 --- a/devui/data-table/data-table-cell.component.ts +++ b/devui/data-table/data-table-cell.component.ts @@ -11,7 +11,7 @@ import { OnDestroy, OnInit, SimpleChange, - ViewChild + ViewChild, } from '@angular/core'; import { I18nFormat, I18nService } from 'ng-devui/i18n'; import { InputNumberComponent } from 'ng-devui/input-number'; @@ -95,14 +95,14 @@ export class DataTableCellComponent implements OnInit, OnChanges, OnDestroy { } ngOnChanges(changes: { [propKey: string]: SimpleChange }) { - const rowItem = changes['rowItem']; + const rowItem = changes.rowItem; if (rowItem) { this.updateEditable(rowItem); } } updateEditable(rowItem) { - const currentConfig = rowItem.currentValue['$editDeniedConfig']; + const currentConfig = rowItem.currentValue.$editDeniedConfig; if (!currentConfig) { if (this.fieldEditDenied) { this.fieldEditDenied = false; @@ -131,7 +131,7 @@ export class DataTableCellComponent implements OnInit, OnChanges, OnDestroy { rowItem: this.rowItem, cellComponent: this, rowComponent: this.rowComponent, - event: $event + event: $event, }; this.clickCount++; @@ -153,7 +153,7 @@ export class DataTableCellComponent implements OnInit, OnChanges, OnDestroy { column: this.column, rowItem: this.rowItem, cellComponent: this, - rowComponent: this.rowComponent + rowComponent: this.rowComponent, }; this.dt.onCellDBClick(cellSelectedEventArg); } @@ -187,7 +187,7 @@ export class DataTableCellComponent implements OnInit, OnChanges, OnDestroy { column: this.column, rowItem: this.rowItem, cellComponent: this, - rowComponent: this.rowComponent + rowComponent: this.rowComponent, }); } @@ -246,7 +246,6 @@ export class DataTableCellComponent implements OnInit, OnChanges, OnDestroy { break; default: this.templateEditorActive = true; - break; } if (editorComponent) { @@ -291,32 +290,28 @@ export class DataTableCellComponent implements OnInit, OnChanges, OnDestroy { column: this.column, rowItem: this.rowItem, cellComponent: this, - rowComponent: this.rowComponent + rowComponent: this.rowComponent, }; if (this.column.editable && this.editModel === 'cell') { this.isCellEdit = true; this.creatCellEditor(); - this.documentClickSubscription = this.dt.documentClickEvent.subscribe( - event => { - const containTarget = !this.cellRef.nativeElement.contains(event.target) && !this.clickInTd; - const flag = this.dt.beforeCellEditEnd && containTarget ? this.dt.beforeCellEditEnd(this.rowItem, this.column) : true; - if ((event === 'cancel' || containTarget) && flag) { - this.ngZone.run(() => { - this.finishCellEdit(); - }); - } - this.clickInTd = false; - } - ); - this.cellEditorClickSubscription = this.dt.cellEditorClickEvent.subscribe( - event => { - const containTarget = this.cellRef.nativeElement.contains(event.target); - const flag = (this.dt.beforeCellEditEnd && !containTarget) ? this.dt.beforeCellEditEnd(this.rowItem, this.column) : true; - if (!containTarget && flag) { + this.documentClickSubscription = this.dt.documentClickEvent.subscribe((event) => { + const containTarget = !this.cellRef.nativeElement.contains(event.target) && !this.clickInTd; + const flag = this.dt.beforeCellEditEnd && containTarget ? this.dt.beforeCellEditEnd(this.rowItem, this.column) : true; + if ((event === 'cancel' || containTarget) && flag) { + this.ngZone.run(() => { this.finishCellEdit(); - } + }); } - ); + this.clickInTd = false; + }); + this.cellEditorClickSubscription = this.dt.cellEditorClickEvent.subscribe((event) => { + const containTarget = this.cellRef.nativeElement.contains(event.target); + const flag = this.dt.beforeCellEditEnd && !containTarget ? this.dt.beforeCellEditEnd(this.rowItem, this.column) : true; + if (!containTarget && flag) { + this.finishCellEdit(); + } + }); this.dt.onCellEditStart(cellSelectedEventArg); } }); diff --git a/devui/data-table/data-table-column.spec.ts b/devui/data-table/data-table-column.spec.ts index 9e6aa375..cbfd1c28 100644 --- a/devui/data-table/data-table-column.spec.ts +++ b/devui/data-table/data-table-column.spec.ts @@ -1,5 +1,5 @@ import { ChangeDetectorRef, Component, DebugElement, ElementRef, OnInit, ViewChild } from '@angular/core'; -import { ComponentFixture, fakeAsync, flush, TestBed, tick } from '@angular/core/testing'; +import { ComponentFixture, TestBed, fakeAsync, flush, tick } from '@angular/core/testing'; import { FormsModule } from '@angular/forms'; import { By } from '@angular/platform-browser'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; @@ -15,7 +15,7 @@ import { LoadingType } from '..'; import { I18nModule } from '../i18n'; import { createMouseEvent } from '../utils/testing/event-helper'; import { DataTableModule } from './data-table.module'; -import { editableOriginSource, genderSource, originSource, SourceType, treeDataSource } from './demo/mock-data'; +import { SourceType, editableOriginSource, genderSource, originSource, treeDataSource } from './demo/mock-data'; const dataTableOptions = { columns: [ { @@ -23,28 +23,28 @@ const dataTableOptions = { header: 'First Name', fieldType: 'text', sortable: true, - order: 1 + order: 1, }, { field: 'lastName', header: 'Last Name', fieldType: 'text', sortable: true, - order: 2 + order: 2, }, { field: 'gender', header: 'gender', fieldType: 'text', sortable: true, - order: 3 + order: 3, }, { field: 'dob', header: 'Date of birth', fieldType: 'date', sortable: true, - order: 4 + order: 4, }, ], }; @@ -52,8 +52,14 @@ const dataTableOptions = { // column: basic & checkable @Component({ template: ` - + item.name); + const filterList = $event.map((item) => item.name); const dataDisplay = []; - JSON.parse(JSON.stringify(originSource.slice(0, 6))).forEach(item => { + JSON.parse(JSON.stringify(originSource.slice(0, 6))).forEach((item) => { if (filterList.includes(item.firstName)) { dataDisplay.push(item); } @@ -279,7 +285,7 @@ class TestDataTableAdvancedColumnComponent implements OnInit { this.sortableDataSource = dataDisplay; } - beforeFilter = currentValue => { + beforeFilter = (currentValue) => { this.filterListMulti = this.filterList; this.ref.detectChanges(); return true; @@ -295,7 +301,7 @@ class TestDataTableAdvancedColumnComponent implements OnInit { setHalfChecked() { this.halfChecked = false; - const chosen = this.checkboxList.filter(item => item.chosen); + const chosen = this.checkboxList.filter((item) => item.chosen); if (chosen.length === this.checkboxList.length) { this.allChecked = true; } else if (chosen.length > 0) { @@ -330,7 +336,7 @@ class TestDataTableAdvancedColumnComponent implements OnInit { - {{ cellItem | i18nDate: 'full':false }} + {{ cellItem | i18nDate : 'full' : false }} @@ -344,7 +350,7 @@ class TestDataTableAdvancedColumnComponent implements OnInit { [(ngModel)]="rowItem[column.field]" dDatepicker appendToBody - [dateFormat]="yyyy-MM-DD" + [dateFormat]="yyyy - MM - DD" #datePicker="datepicker" [showTime]="true" [autoOpen]="true" @@ -551,28 +557,28 @@ class TestDataTableColumnDragComponent { @Component({ template: ` - - - - - - -
-
- -
-
- + #dataTable + [dataSource]="basicDataSource" + [checkable]="true" + [showExpandToggle]="true" + [scrollable]="true" + (detialToggle)="toggleChange($event)" + > + + + + + + +
+
+ +
+
+ +
-
- + `, }) class TestDataTableExpandComponent implements OnInit { @@ -587,7 +593,7 @@ class TestDataTableExpandComponent implements OnInit { toggleChange = jasmine.createSpy('detail content toggle change'); ngOnInit() { this.basicDataSource[0].$expandConfig = { expand: false, expandTemplateRef: this.addSubRowContent }; - this.basicDataSource[1]['$isDetailOpen'] = true; + (this.basicDataSource[1] as any).$isDetailOpen = true; this.basicDataSource[1].detail = 'show detail'; } } @@ -705,7 +711,7 @@ describe('data-table column', () => { component.checkable = true; fixture.detectChanges(); const dropdownElement = debugEl.query(By.css('table .devui-checkable-cell .select-options')); - dropdownElement.nativeElement.dispatchEvent(new MouseEvent('mouseenter', {'bubbles': false, 'cancelable': false})); + dropdownElement.nativeElement.dispatchEvent(new MouseEvent('mouseenter', { bubbles: false, cancelable: false })); fixture.detectChanges(); tick(50); // debounce time fixture.detectChanges(); @@ -729,7 +735,7 @@ describe('data-table column', () => { beforeEach(() => { TestBed.configureTestingModule({ imports: [DataTableModule, FormsModule, CheckBoxModule, TooltipModule, AvatarModule, NoopAnimationsModule], - declarations: [TestDataTableAdvancedColumnComponent] + declarations: [TestDataTableAdvancedColumnComponent], }); }); @@ -1009,7 +1015,7 @@ describe('data-table column', () => { beforeEach(() => { TestBed.configureTestingModule({ imports: [FormsModule, DataTableModule, I18nModule, DatepickerModule, InputNumberModule, SelectModule, NoopAnimationsModule], - declarations: [TestDataTableColumnEditComponent] + declarations: [TestDataTableColumnEditComponent], }); }); @@ -1031,7 +1037,7 @@ describe('data-table column', () => { const inputDebugEl = debugEl.query(By.css('.customized-editor.edit-padding-fix > input')); expect(inputDebugEl).toBeTruthy(); - expect(inputDebugEl.nativeElement.value).toEqual(component.basicDataSource[0]['lastName']); + expect(inputDebugEl.nativeElement.value).toEqual(component.basicDataSource[0].lastName); inputDebugEl.nativeElement.value = 'testLastName'; inputDebugEl.nativeElement.dispatchEvent(new Event('input')); fixture.detectChanges(); @@ -1148,7 +1154,7 @@ describe('data-table column', () => { beforeEach(() => { TestBed.configureTestingModule({ imports: [DataTableModule], - declarations: [TestDataTableColumnWithChildrenComponent] + declarations: [TestDataTableColumnWithChildrenComponent], }); }); @@ -1166,7 +1172,7 @@ describe('data-table column', () => { it('should set row child toggle status function work', fakeAsync(() => { let checkBoxes = debugEl.queryAll(By.css('tbody .devui-checkbox.unchecked')); let togglers = debugEl.queryAll(By.css('.childtable-toggler')); - let togglersShow = togglers.filter(item => item.nativeElement.style.visibility === 'visible'); + let togglersShow = togglers.filter((item) => item.nativeElement.style.visibility === 'visible'); expect(checkBoxes.length).toBe(component.basicDataSource.length); expect(togglersShow.length).toBe(2); @@ -1177,7 +1183,7 @@ describe('data-table column', () => { fixture.detectChanges(); checkBoxes = debugEl.queryAll(By.css('tbody .devui-checkbox.unchecked')); togglers = debugEl.queryAll(By.css('.childtable-toggler')); - togglersShow = togglers.filter(item => item.nativeElement.style.visibility === 'visible'); + togglersShow = togglers.filter((item) => item.nativeElement.style.visibility === 'visible'); expect(checkBoxes.length).toBe(component.basicDataSource.length + 2); // 展开的子元素2个 expect(togglersShow.length).toBe(3); })); @@ -1191,7 +1197,7 @@ describe('data-table column', () => { beforeEach(() => { TestBed.configureTestingModule({ imports: [DataTableModule, I18nModule, NoopAnimationsModule], - declarations: [TestDataTableColumnFixHeaderComponent] + declarations: [TestDataTableColumnFixHeaderComponent], }); }); @@ -1282,7 +1288,7 @@ describe('data-table column', () => { beforeEach(() => { TestBed.configureTestingModule({ imports: [DataTableModule, I18nModule, NoopAnimationsModule], - declarations: [TestDataTableColumnMultiHeaderComponent] + declarations: [TestDataTableColumnMultiHeaderComponent], }); }); @@ -1394,7 +1400,7 @@ describe('data-table column', () => { beforeEach(() => { TestBed.configureTestingModule({ imports: [DataTableModule, NoopAnimationsModule], - declarations: [TestDataTableColumnDragComponent] + declarations: [TestDataTableColumnDragComponent], }); }); diff --git a/devui/data-table/data-table-head.component.ts b/devui/data-table/data-table-head.component.ts index e0a9ee58..af69142a 100755 --- a/devui/data-table/data-table-head.component.ts +++ b/devui/data-table/data-table-head.component.ts @@ -1,7 +1,23 @@ import { DOCUMENT } from '@angular/common'; import { - AfterViewInit, ChangeDetectorRef, Component, DoCheck, ElementRef, EventEmitter, Inject, Input, - IterableDiffers, KeyValueDiffers, NgZone, OnChanges, OnDestroy, OnInit, Output, QueryList, SimpleChanges, ViewChildren + AfterViewInit, + ChangeDetectorRef, + Component, + DoCheck, + ElementRef, + EventEmitter, + Inject, + Input, + IterableDiffers, + KeyValueDiffers, + NgZone, + OnChanges, + OnDestroy, + OnInit, + Output, + QueryList, + SimpleChanges, + ViewChildren, } from '@angular/core'; import { I18nInterface, I18nService } from 'ng-devui/i18n'; import { Subscription } from 'rxjs'; @@ -120,14 +136,16 @@ export class DataTableHeadComponent implements OnInit, OnChanges, AfterViewInit, checkedListForFilter = []; document: Document; documentElement: HTMLElement; - constructor(@Inject(DATA_TABLE) public dt: any, - private zone: NgZone, - private element: ElementRef, - private differs: KeyValueDiffers, - private iterableDiffers: IterableDiffers, - private ref: ChangeDetectorRef, - private i18n: I18nService, - @Inject(DOCUMENT) private doc: any) { + constructor( + @Inject(DATA_TABLE) public dt: any, + private zone: NgZone, + private element: ElementRef, + private differs: KeyValueDiffers, + private iterableDiffers: IterableDiffers, + private ref: ChangeDetectorRef, + private i18n: I18nService, + @Inject(DOCUMENT) private doc: any + ) { this.i18nCommonText = this.i18n.getI18nText().common; this.document = this.doc; this.documentElement = this.doc.documentElement; @@ -148,26 +166,29 @@ export class DataTableHeadComponent implements OnInit, OnChanges, AfterViewInit, } ngOnChanges(changes: SimpleChanges): void { - if ((changes['columns'] || changes.multiSort) && this.columns) { + const { columns, tableBodyEl } = changes; + if ((columns || changes.multiSort) && this.columns) { this.multiSortArray = []; - this.columns.forEach(column => { + this.columns.forEach((column) => { if (column.sortable) { - const sortIndex = this.multiSort.findIndex(item => item['field'] === column.field); + const sortIndex = this.multiSort.findIndex((item) => item.field === column.field); this.multiSortArray.push({ field: column.field, - direction: sortIndex !== -1 ? this.multiSort[sortIndex].direction : SortDirection.default + direction: sortIndex !== -1 ? this.multiSort[sortIndex].direction : SortDirection.default, }); } }); } - if (changes['columns'] && this.columns) { - this.rowCount = Math.max(... this.columns.map(column => { - if (column.advancedHeader) { - return column.advancedHeader.length; - } else { - return 0; - } - })); + if (columns && this.columns) { + this.rowCount = Math.max( + ...this.columns.map((column) => { + if (column.advancedHeader) { + return column.advancedHeader.length; + } else { + return 0; + } + }) + ); if (this.rowCount > 0) { this.rowCountArray = new Array(this.rowCount); this.initAdvanceHeader(); @@ -182,7 +203,7 @@ export class DataTableHeadComponent implements OnInit, OnChanges, AfterViewInit, } } - if (this.colDraggable && changes['tableBodyEl'] && this.tableBodyEl) { + if (this.colDraggable && tableBodyEl && this.tableBodyEl) { if (this.fixHeader && this.tableBodyEl && this.dataSource.length) { this.fixOriginTable = this.tableBodyEl.nativeElement; this.renderFixFakeTableEl(); @@ -228,16 +249,15 @@ export class DataTableHeadComponent implements OnInit, OnChanges, AfterViewInit, this.mirrorContainer = this.element.nativeElement.parentNode.parentNode; this.bodyOverflow = this.documentElement.style.overflow; this.detecteOriginTable(); - setTimeout(() => { // wait for table render ready + setTimeout(() => { + // wait for table render ready this.renderFakeTable(); this.el.style.display = 'none'; - }); this.documentElement.addEventListener('resize', this.renderFakeTable); this.createCellMap(); this.scrollViewEl = this.originTable.parentNode.parentNode; this.scrollViewRect = this.scrollViewEl.getBoundingClientRect(); - } } @@ -250,12 +270,14 @@ export class DataTableHeadComponent implements OnInit, OnChanges, AfterViewInit, } else { if (column.advancedHeader[0].colspan) { this.cellMap[cellIndex] = { - name: column.field, isAdvanceHeader: true, - sortKey: [index], headerLength: column.advancedHeader[0].colspan + name: column.field, + isAdvanceHeader: true, + sortKey: [index], + headerLength: column.advancedHeader[0].colspan, }; cellIndex++; } else { - Object.keys(this.cellMap).forEach(key => { + Object.keys(this.cellMap).forEach((key) => { const item = this.cellMap[key]; if (item.isAdvanceHeader && item.sortKey.length < item.headerLength) { item.sortKey.push(index); @@ -294,7 +316,7 @@ export class DataTableHeadComponent implements OnInit, OnChanges, AfterViewInit, } getIfExistMultiSort(field): any { - const column = this.columns.find(item => item['field'] === field); + const column = this.columns.find((item) => item.field === field); return !!column.sortable; } @@ -302,11 +324,11 @@ export class DataTableHeadComponent implements OnInit, OnChanges, AfterViewInit, if (!this.multiSortArray) { return false; } - const filterField = this.multiSortArray.filter(item => { - return item['field'] === field; + const filterField = this.multiSortArray.filter((item) => { + return item.field === field; }); if (filterField.length !== 0) { - return filterField[0]['direction']; + return filterField[0].direction; } else { return undefined; } @@ -315,13 +337,13 @@ export class DataTableHeadComponent implements OnInit, OnChanges, AfterViewInit, onResize($event, column) { this.resizeHandlerEvent.emit({ ...$event, - field: column.field + field: column.field, }); } onBeginResize($event) { const thRenderWidthList = []; - this.thList.forEach(th => { + this.thList.forEach((th) => { thRenderWidthList.push({ field: th.element.getAttribute('field'), width: th.element.clientWidth }); }); this.beginResizeHandlerEvent.emit({ event: $event, thRenderWidthList }); @@ -330,22 +352,22 @@ export class DataTableHeadComponent implements OnInit, OnChanges, AfterViewInit, onResizing($event, column) { this.resizingHandlerEvent.emit({ ...$event, - field: column.field + field: column.field, }); } // 初始化多行表头，为了兼容resizeable对表头互相影响数据做了记录 initAdvanceHeader() { if (this.resizeable) { - this.columns.forEach((column, colIndex) => { - if (column['advancedHeader']) { - column['advancedHeader'].forEach((item, rowIndex) => { - item['$rowIndex'] = rowIndex; - item['$colIndex'] = colIndex; - item['$cols'] = new Array(item.colspan).fill(1).map((v, i) => colIndex + i); + this.columns.forEach((column: any, colIndex) => { + if (column.advancedHeader) { + column.advancedHeader.forEach((item, rowIndex) => { + item.$rowIndex = rowIndex; + item.$colIndex = colIndex; + item.$cols = new Array(item.colspan).fill(1).map((v, i) => colIndex + i); }); } - column['$colIndex'] = colIndex; + column.$colIndex = colIndex; }); } } @@ -357,7 +379,8 @@ export class DataTableHeadComponent implements OnInit, OnChanges, AfterViewInit, onTap(e) { e.preventDefault(); this.originCellIndex = this.findCellIndex(e); - setTimeout(() => { // fix chrome bug, mousedown的时候会错误的触发mousemove + setTimeout(() => { + // fix chrome bug, mousedown的时候会错误的触发mousemove this.documentElement.addEventListener('mousemove', this.handleMousemove); this.documentElement.addEventListener('mouseup', () => { this.documentElement.removeEventListener('mousemove', this.handleMousemove); @@ -370,7 +393,8 @@ export class DataTableHeadComponent implements OnInit, OnChanges, AfterViewInit, this.documentElement.removeEventListener('mousemove', this.handleMousemove); this.documentElement.addEventListener('mousedown', this.grab); this.documentElement.addEventListener('mouseup', this.release); - setTimeout(() => { // fix chrome bug, mousedown的时候会错误的触发mousemove + setTimeout(() => { + // fix chrome bug, mousedown的时候会错误的触发mousemove this.dispatchMousedown(); }); }; @@ -484,7 +508,7 @@ export class DataTableHeadComponent implements OnInit, OnChanges, AfterViewInit, const rect = el.getBoundingClientRect(); return { left: rect.left + this.getScroll('scrollLeft', 'pageXOffset'), - top: rect.top + this.getScroll('scrollTop', 'pageYOffset') + top: rect.top + this.getScroll('scrollTop', 'pageYOffset'), }; } getScroll(scrollProp, offsetProp) { @@ -511,9 +535,9 @@ export class DataTableHeadComponent implements OnInit, OnChanges, AfterViewInit, event.initMouseEvent('mousedown', true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); } else { event = new MouseEvent('mousedown', { - 'view': window, - 'bubbles': true, - 'cancelable': true + view: window, + bubbles: true, + cancelable: true, }); } return event; @@ -544,7 +568,7 @@ export class DataTableHeadComponent implements OnInit, OnChanges, AfterViewInit, } return { item: item, - source: source + source: source, }; } @@ -640,7 +664,7 @@ export class DataTableHeadComponent implements OnInit, OnChanges, AfterViewInit, const attr = 'margin-right'; const length = el.children.length; Array.from(el.children).forEach((li, dex) => { - if (spacing && dex < (length - 1)) { + if (spacing && dex < length - 1) { (li).style[attr] = `-${spacing}`; } }); @@ -651,17 +675,15 @@ export class DataTableHeadComponent implements OnInit, OnChanges, AfterViewInit, sizeColumnFake(fakeTables, originEl) { // calculate width of every column - Array.from(originEl.rows[0].children).forEach( - (cell, index) => { - if (!fakeTables[index]) { - return; - } - const w = (cell).getBoundingClientRect().width; - const t = fakeTables[index]; - this.css(t, { width: `${w}px` }); - this.css(t.rows[0].children[0], { width: `${w}px` }); + Array.from(originEl.rows[0].children).forEach((cell, index) => { + if (!fakeTables[index]) { + return; } - ); + const w = (cell).getBoundingClientRect().width; + const t = fakeTables[index]; + this.css(t, { width: `${w}px` }); + this.css(t.rows[0].children[0], { width: `${w}px` }); + }); } css(el, cssList) { @@ -789,17 +811,14 @@ export class DataTableHeadComponent implements OnInit, OnChanges, AfterViewInit, if (changed || dropTarget === null) { this.lastDropTarget = dropTarget; } - if ( - (reference === null && changed) || - reference !== this.item && - reference !== this.nextEl(this.item) - ) { + if ((reference === null && changed) || (reference !== this.item && reference !== this.nextEl(this.item))) { let mover; const nowCord = e.pageX; if (nowCord < this.oldCoord) { mover = reference; // upward or right } else { - mover = reference ? (reference.previousElementSibling ? reference.previousElementSibling : reference) : dropTarget.lastElementChild; + const result = reference.previousElementSibling ? reference.previousElementSibling : reference; + mover = reference ? result : dropTarget.lastElementChild; } this.oldCoord = nowCord; @@ -872,10 +891,10 @@ export class DataTableHeadComponent implements OnInit, OnChanges, AfterViewInit, return; } - if (this.scrollViewRect.left < x && x < (this.scrollViewRect.left + range)) { + if (this.scrollViewRect.left < x && x < this.scrollViewRect.left + range) { this.animationRequestId = requestAnimationFrame(scrollToLeft); } - if ((this.scrollViewRect.right - range) < x && x < this.scrollViewRect.right) { + if (this.scrollViewRect.right - range < x && x < this.scrollViewRect.right) { this.animationRequestId = requestAnimationFrame(scrollToRight); } } @@ -928,8 +947,10 @@ export class DataTableHeadComponent implements OnInit, OnChanges, AfterViewInit, } }; const insertBodyColList = this.getDataBetween(selectedColIndex - 1 + this.colOffset, selectedColIndex + this.colOffset + colSpan); - const insertHeaderColList = this.getDataBetween(selectedColIndex + this.secondHeaderOffset - 1, selectedColIndex + - this.secondHeaderOffset + colSpan - rowSpan + 1); + const insertHeaderColList = this.getDataBetween( + selectedColIndex + this.secondHeaderOffset - 1, + selectedColIndex + this.secondHeaderOffset + colSpan - rowSpan + 1 + ); const getTreeTableCol = (row, rowIndex) => { const target = this.getChildTableColumn((row).children[0].children[0], selectedColIndex); empty((row).children[0]); @@ -996,7 +1017,7 @@ export class DataTableHeadComponent implements OnInit, OnChanges, AfterViewInit, } this.css(row, { height: `${table.rows[rowIndex].getBoundingClientRect().height}px` }); }); - this.colOffset += (colSpan - 1); + this.colOffset += colSpan - 1; this.secondHeaderOffset = rowSpan > 1 ? this.secondHeaderOffset - 1 : this.secondHeaderOffset; return cTable; } @@ -1042,8 +1063,7 @@ export class DataTableHeadComponent implements OnInit, OnChanges, AfterViewInit, this.css(fakeTable.rows[0].children[0], { width: `${w}px` }); // calculate height of every cell - const rowHeights = Array.from(originEl.rows) - .map(row => (row).children[0].getBoundingClientRect().height); + const rowHeights = Array.from(originEl.rows).map((row) => (row).children[0].getBoundingClientRect().height); Array.from(fakeTable.rows).forEach((row, rowIndex) => { this.css(row, { height: `${rowHeights[rowIndex]}px` }); }); @@ -1105,12 +1125,14 @@ export class DataTableHeadComponent implements OnInit, OnChanges, AfterViewInit, return after ? this.nextEl(target) : target; }; - const inside = () => { // faster, but only available if dropped inside a child element + const inside = () => { + // faster, but only available if dropped inside a child element const rect = target.getBoundingClientRect(); return resolve(x > rect.left + this.getRectWidth(rect) / 2); }; - const outside = () => { // slower, but able to figure out any position + const outside = () => { + // slower, but able to figure out any position const len = dropTarget.children.length; let i; let el; @@ -1118,7 +1140,7 @@ export class DataTableHeadComponent implements OnInit, OnChanges, AfterViewInit, for (i = 0; i < len; i++) { el = dropTarget.children[i]; rect = el.getBoundingClientRect(); - if ((rect.left + rect.width / 2) > x) { + if (rect.left + rect.width / 2 > x) { return el; } } @@ -1130,10 +1152,10 @@ export class DataTableHeadComponent implements OnInit, OnChanges, AfterViewInit, }; getRectWidth(rect) { - return rect.width || (rect.right - rect.left); + return rect.width || rect.right - rect.left; } getRectHeight(rect) { - return rect.height || (rect.bottom - rect.top); + return rect.height || rect.bottom - rect.top; } nextEl(el) { @@ -1189,7 +1211,7 @@ export class DataTableHeadComponent implements OnInit, OnChanges, AfterViewInit, target.style.transition = 'all ' + time + 'ms cubic-bezier(0.755, 0.05, 0.855, 0.06)'; target.style.transform = 'translate3d(0,0,0)'; clearTimeout(target.animated); - target.animated = setTimeout(function () { + target.animated = setTimeout(() => { target.style.transition = ''; target.style.transform = ''; target.animated = false; diff --git a/devui/data-table/data-table-row.component.ts b/devui/data-table/data-table-row.component.ts index 313e55e9..865a303c 100755 --- a/devui/data-table/data-table-row.component.ts +++ b/devui/data-table/data-table-row.component.ts @@ -9,7 +9,7 @@ import { Input, NgZone, OnInit, - Output + Output, } from '@angular/core'; import { DATA_TABLE_ROW } from './data-table-row.token'; import { DATA_TABLE } from './data-table.token'; @@ -21,10 +21,12 @@ import { DataTableColumnTmplComponent } from './tmpl/data-table-column-tmpl.comp templateUrl: './data-table-row.component.html', styleUrls: ['./data-table-row.component.scss'], preserveWhitespaces: false, - providers: [{ - provide: DATA_TABLE_ROW, - useExisting: forwardRef(() => DataTableRowComponent) - }], + providers: [ + { + provide: DATA_TABLE_ROW, + useExisting: forwardRef(() => DataTableRowComponent), + }, + ], }) export class DataTableRowComponent implements OnInit { @Input() rowItem: any; @@ -50,29 +52,20 @@ export class DataTableRowComponent implements OnInit { clickCount = 0; // 记录点击次数 timeoutId; // 延时id - constructor(@Inject(DATA_TABLE) public dt: any, private changeDetectorRef: ChangeDetectorRef, - private rowRef: ElementRef, private ngZone: NgZone) { - } + constructor( + @Inject(DATA_TABLE) public dt: any, + private changeDetectorRef: ChangeDetectorRef, + private rowRef: ElementRef, + private ngZone: NgZone + ) {} ngOnInit(): void { this.ngZone.runOutsideAngular(() => { - this.rowRef.nativeElement.addEventListener( - 'mouseup', - this.onRowClick.bind(this) - ); - this.rowRef.nativeElement.addEventListener( - 'dblclick', - this.onRowDBClick.bind(this) - ); + this.rowRef.nativeElement.addEventListener('mouseup', this.onRowClick.bind(this)); + this.rowRef.nativeElement.addEventListener('dblclick', this.onRowDBClick.bind(this)); if (this.generalRowHoveredData) { - this.rowRef.nativeElement.addEventListener( - 'mouseenter', - this.onRowMouseEnter.bind(this) - ); - this.rowRef.nativeElement.addEventListener( - 'mouseleave', - this.onRowMouseLeave.bind(this) - ); + this.rowRef.nativeElement.addEventListener('mouseenter', this.onRowMouseEnter.bind(this)); + this.rowRef.nativeElement.addEventListener('mouseleave', this.onRowMouseLeave.bind(this)); } }); } @@ -88,7 +81,11 @@ export class DataTableRowComponent implements OnInit { this.timeoutId = setTimeout(() => { if (this.clickCount === 1) { this.dt.onRowClick({ - rowIndex: this.rowIndex, nestedIndex: this.nestedIndex, rowItem: this.rowItem, rowComponent: this, event: $event + rowIndex: this.rowIndex, + nestedIndex: this.nestedIndex, + rowItem: this.rowItem, + rowComponent: this, + event: $event, }); } this.clickCount = 0; @@ -120,15 +117,15 @@ export class DataTableRowComponent implements OnInit { } toggle() { - if (this.rowItem['$isDetailOpen'] === undefined) { - this.rowItem['$isDetailOpen'] = !!this.rowItem.$expandConfig?.expand; + if (this.rowItem.$isDetailOpen === undefined) { + this.rowItem.$isDetailOpen = !!this.rowItem.$expandConfig?.expand; } - this.rowItem['$isDetailOpen'] = !this.rowItem['$isDetailOpen']; + this.rowItem.$isDetailOpen = !this.rowItem.$isDetailOpen; if (this.rowItem.$expandConfig) { this.rowItem.$expandConfig.expand = !this.rowItem.$expandConfig.expand; } - this.detailChange.emit({ state: this.rowItem['$isDetailOpen'], index: this.rowIndex }); - this.dt.onDetailToggle({ state: this.rowItem['$isDetailOpen'], index: this.rowIndex }); + this.detailChange.emit({ state: this.rowItem.$isDetailOpen, index: this.rowIndex }); + this.dt.onDetailToggle({ state: this.rowItem.$isDetailOpen, index: this.rowIndex }); } trackByFn(index, item) { diff --git a/devui/data-table/data-table.component.html b/devui/data-table/data-table.component.html index d43d8043..48c323c8 100755 --- a/devui/data-table/data-table.component.html +++ b/devui/data-table/data-table.component.html @@ -14,8 +14,8 @@ [ngClass]="{ 'shadow-fix-header': headerBg }" - [style.overflow-x]="'hidden'" - [style.overflow-y]="'scroll'" + [style.overflow-x]="dataSource?.length ? 'hidden' : 'auto'" + [style.overflow-y]="dataSource?.length ? 'scroll' : 'hidden'" [style.max-height]="maxHeight ? maxHeight : null" [style.max-width]="maxWidth ? maxWidth : null" [style.width]="!maxWidth ? tableWidth : null" @@ -43,6 +43,7 @@ (loadMore)="onLoadMore($event)" *ngIf="!virtualScroll; else scrollViewTpl" class="devui-scrollbar" + [style.overflow-x]="dataSource?.length || !fixHeader ? 'auto' : 'hidden'" [ngClass]="{ 'scroll-view': scrollable, 'overflow-overlay': tableOverflowType === 'overlay', diff --git a/devui/data-table/data-table.component.ts b/devui/data-table/data-table.component.ts index 6b7c22cc..ef0089d9 100755 --- a/devui/data-table/data-table.component.ts +++ b/devui/data-table/data-table.component.ts @@ -22,15 +22,22 @@ import { Renderer2, SimpleChanges, TemplateRef, - ViewChild + ViewChild, } from '@angular/core'; import { merge, Subscription } from 'rxjs'; import { switchMap, takeUntil } from 'rxjs/operators'; import { DataTableHeadComponent } from './data-table-head.component'; import { - CellSelectedEventArg, CheckableRelation, ColumnResizeEventArg, RowCheckChangeEventArg, - RowSelectedEventArg, SortEventArg, TableCheckOptions, TableCheckStatusArg, - TableExpandConfig, TableWidthConfig + CellSelectedEventArg, + CheckableRelation, + ColumnResizeEventArg, + RowCheckChangeEventArg, + RowSelectedEventArg, + SortEventArg, + TableCheckOptions, + TableCheckStatusArg, + TableExpandConfig, + TableWidthConfig, } from './data-table.model'; import { DATA_TABLE } from './data-table.token'; import { TableTbodyComponent } from './table/body/tbody.component'; @@ -43,17 +50,16 @@ const SCROLL_BAR_WIDTH = 8; @Component({ selector: 'd-data-table', templateUrl: './data-table.component.html', - styleUrls: [ - './data-table.component.scss', - './data-table.component.color.scss' - ], + styleUrls: ['./data-table.component.scss', './data-table.component.color.scss'], // changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'dataTable', preserveWhitespaces: false, - providers: [{ + providers: [ + { provide: DATA_TABLE, - useExisting: forwardRef(() => DataTableComponent) - }], + useExisting: forwardRef(() => DataTableComponent), + }, + ], }) export class DataTableComponent implements OnDestroy, OnInit, OnChanges, AfterContentInit, AfterViewInit { /** @@ -319,10 +325,10 @@ export class DataTableComponent implements OnDestroy, OnInit, OnChanges, AfterCo @ViewChild('normalScroll') normalScrollElement: ElementRef; @ViewChild('scrollViewTpl') vitualScrollElement: TemplateRef; @ViewChild(DataTableHeadComponent) columnHeaderComponent: DataTableHeadComponent; - @ViewChild('devuiNormalScrollBody', {read: ElementRef}) devuiNormalScrollBody: ElementRef; + @ViewChild('devuiNormalScrollBody', { read: ElementRef }) devuiNormalScrollBody: ElementRef; @HostBinding('style.height') get hostHeight() { - return (this.tableHeight && this.dataSource.length) ? this.tableHeight : null; + return this.tableHeight && this.dataSource.length ? this.tableHeight : null; } @HostBinding('class.devui-table-shadow') get hasShadow() { @@ -382,7 +388,7 @@ export class DataTableComponent implements OnDestroy, OnInit, OnChanges, AfterCo this.halfChecked = hasChecked && hasUnChecked; if (this.innerHeader) { - this.innerHeader.setHeaderCheckStatus({pageAllChecked: this._pageAllChecked, pageHalfChecked: this.halfChecked}); + this.innerHeader.setHeaderCheckStatus({ pageAllChecked: this._pageAllChecked, pageHalfChecked: this.halfChecked }); } // 固定表头时，数据从无数据到有数据，需要更新滚动位置，避免对齐偏移 @@ -432,7 +438,8 @@ export class DataTableComponent implements OnDestroy, OnInit, OnChanges, AfterCo private ngZone: NgZone, private renderer: Renderer2, private cdr: ChangeDetectorRef, - @Inject(DOCUMENT) private doc: any) { + @Inject(DOCUMENT) private doc: any + ) { this.onDocumentClickListen = this.onDocumentClick.bind(this); this.document = this.doc; } @@ -455,7 +462,7 @@ export class DataTableComponent implements OnDestroy, OnInit, OnChanges, AfterCo if (this.tableBodyEl) { const tableHeader = this.tableBodyEl.nativeElement.querySelector('thead'); - const tableHeaderHeight = (tableHeader?.offsetHeight + SCROLL_BAR_WIDTH) || 0; + const tableHeaderHeight = tableHeader?.offsetHeight + SCROLL_BAR_WIDTH || 0; const curTotalHeight = this.dataSource.length * this.virtualItemSize + tableHeaderHeight + SCROLL_BAR_WIDTH; this.virtualBodyHeight = curTotalHeight < parseInt(this.maxHeight, 10) ? curTotalHeight + 'px' : this.maxHeight; return; @@ -463,9 +470,8 @@ export class DataTableComponent implements OnDestroy, OnInit, OnChanges, AfterCo } private getColumns() { - const cols = this.columns - .filter(column => { - return !this.hideColumn.some(field => column.field === field); + const cols = this.columns.filter((column) => { + return !this.hideColumn.some((field) => column.field === field); }); cols.sort((first, second) => first.order - second.order); return cols; @@ -479,16 +485,17 @@ export class DataTableComponent implements OnDestroy, OnInit, OnChanges, AfterCo } ngOnChanges(changes: SimpleChanges): void { - if (changes['checkable']) { + const { checkable, showExpandToggle, tableHeight, maxHeight, virtualScroll } = changes; + if (checkable) { const checkColIndex = this.tableWidthConfig.findIndex((config) => { return config.field === 'checkbox'; }); if (this.checkable) { if (checkColIndex < 0) { if (this.showExpandToggle) { - this.tableWidthConfig.splice(1, 0, {field: 'checkbox', width: this.BUILTIN_COL_WIDTH}); + this.tableWidthConfig.splice(1, 0, { field: 'checkbox', width: this.BUILTIN_COL_WIDTH }); } else { - this.tableWidthConfig.unshift({field: 'checkbox', width: this.BUILTIN_COL_WIDTH}); + this.tableWidthConfig.unshift({ field: 'checkbox', width: this.BUILTIN_COL_WIDTH }); } } } else { @@ -498,13 +505,13 @@ export class DataTableComponent implements OnDestroy, OnInit, OnChanges, AfterCo } } - if (changes['showExpandToggle']) { + if (showExpandToggle) { const expandColIndex = this.tableWidthConfig.findIndex((config) => { return config.field === 'expand'; }); if (this.showExpandToggle) { if (expandColIndex < 0) { - this.tableWidthConfig.unshift({field: 'expand', width: this.BUILTIN_COL_WIDTH}); + this.tableWidthConfig.unshift({ field: 'expand', width: this.BUILTIN_COL_WIDTH }); } } else { if (expandColIndex > -1) { @@ -515,9 +522,7 @@ export class DataTableComponent implements OnDestroy, OnInit, OnChanges, AfterCo if ( this.virtualScroll && - ((changes['tableHeight'] && !changes.tableHeight.firstChange) || - (changes['maxHeight'] && !changes.maxHeight.firstChange) || - (changes['virtualScroll'] && !changes.virtualScroll.firstChange)) + ((tableHeight && !tableHeight.firstChange) || (maxHeight && !maxHeight.firstChange) || (virtualScroll && !virtualScroll.firstChange)) ) { this.initVirtualBodyHeight(); } @@ -568,11 +573,11 @@ export class DataTableComponent implements OnDestroy, OnInit, OnChanges, AfterCo } ngAfterViewInit() { - this.thList.forEach(th => { + this.thList.forEach((th) => { th.tableViewRefElement = this.tableViewRefElement; }); this.thList.changes.subscribe((list) => { - list.forEach(th => { + list.forEach((th) => { th.tableViewRefElement = this.tableViewRefElement; }); }); @@ -593,16 +598,14 @@ export class DataTableComponent implements OnDestroy, OnInit, OnChanges, AfterCo } private resetThSortOrder() { - merge(...this.thList?.map(th => th.sortChange)).pipe( - takeUntil(this.thList.changes) - ).subscribe((sortEvent: SortEventArg) => { - this.thList.filter(th => th !== sortEvent.th).forEach(th => th.clearSortOrder()); + merge(...this.thList?.map((th) => th.sortChange)) + .pipe(takeUntil(this.thList.changes)) + .subscribe((sortEvent: SortEventArg) => { + this.thList.filter((th) => th !== sortEvent.th).forEach((th) => th.clearSortOrder()); }); - this.thList.changes.pipe( - switchMap(() => merge(...this.thList.map(th => th.sortChange))) - ).subscribe((sortEvent: SortEventArg) => { - this.thList.filter(th => th !== sortEvent.th).forEach(th => th.clearSortOrder()); + this.thList.changes.pipe(switchMap(() => merge(...this.thList.map((th) => th.sortChange)))).subscribe((sortEvent: SortEventArg) => { + this.thList.filter((th) => th !== sortEvent.th).forEach((th) => th.clearSortOrder()); }); } @@ -610,18 +613,18 @@ export class DataTableComponent implements OnDestroy, OnInit, OnChanges, AfterCo this._columns = this.getColumns(); this.tableWidthConfig = []; if (this.showExpandToggle) { - this.tableWidthConfig.push({field: 'expand', width: this.BUILTIN_COL_WIDTH}); + this.tableWidthConfig.push({ field: 'expand', width: this.BUILTIN_COL_WIDTH }); } if (this.checkable) { if (this.checkOptions && this.checkOptions.length > 0) { - this.tableWidthConfig.push({field: 'checkbox', width: this.BUILTIN_COL_WIDTH_EXTRA}); + this.tableWidthConfig.push({ field: 'checkbox', width: this.BUILTIN_COL_WIDTH_EXTRA }); } else { - this.tableWidthConfig.push({field: 'checkbox', width: this.BUILTIN_COL_WIDTH}); + this.tableWidthConfig.push({ field: 'checkbox', width: this.BUILTIN_COL_WIDTH }); } } this._columns.forEach((col) => { - this.tableWidthConfig.push({field: col.field, width: col.width}); + this.tableWidthConfig.push({ field: col.field, width: col.width }); }); } @@ -632,7 +635,7 @@ export class DataTableComponent implements OnDestroy, OnInit, OnChanges, AfterCo onHandleSort(column: SortEventArg) { if (this.multiSort && this.multiSort.length > 0) { - const multiSortIndex = this.multiSort.findIndex(item => item.field === column.field); + const multiSortIndex = this.multiSort.findIndex((item) => item.field === column.field); if (multiSortIndex !== -1) { this.multiSort.splice(multiSortIndex, 1); } @@ -743,7 +746,7 @@ export class DataTableComponent implements OnDestroy, OnInit, OnChanges, AfterCo } if (this.innerHeader) { - this.innerHeader.setHeaderCheckStatus({pageAllChecked: this._pageAllChecked, pageHalfChecked: this.halfChecked}); + this.innerHeader.setHeaderCheckStatus({ pageAllChecked: this._pageAllChecked, pageHalfChecked: this.halfChecked }); } this.rowCheckChange.emit($event); } @@ -791,7 +794,7 @@ export class DataTableComponent implements OnDestroy, OnInit, OnChanges, AfterCo } private setCheckedStatus(data, checked, toggle?: boolean) { - return data.map(item => { + return data.map((item) => { if (!(item.$checkDisabled || item.$disabled)) { if ((toggle && item.$checked === undefined) || !toggle) { item.$checked = checked; @@ -827,16 +830,15 @@ export class DataTableComponent implements OnDestroy, OnInit, OnChanges, AfterCo this.tableWidthConfig = []; if (this.showExpandToggle) { const expandWidth = this.elementRef.nativeElement.querySelector('.devui-detail-cell').clientWidth; - this.tableWidthConfig.push({field: 'expand', width: expandWidth + 'px'}); + this.tableWidthConfig.push({ field: 'expand', width: expandWidth + 'px' }); } if (this.checkable) { const list = this.elementRef.nativeElement.querySelectorAll('.devui-checkable-cell'); const checkboxWidth = list[list.length - 1].clientWidth; - this.tableWidthConfig.push({field: 'checkbox', width: checkboxWidth + 'px'}); - + this.tableWidthConfig.push({ field: 'checkbox', width: checkboxWidth + 'px' }); } this._columns.forEach((col) => { - this.tableWidthConfig.push({field: col.field, width: col.width}); + this.tableWidthConfig.push({ field: col.field, width: col.width }); }); } @@ -846,8 +848,8 @@ export class DataTableComponent implements OnDestroy, OnInit, OnChanges, AfterCo this._tableTotalWidth = this.elementRef.nativeElement.querySelector('.table-wrap').offsetWidth - 8; // 兼容d-column表头分组场景 const reverseThList = thRenderWidthList.reverse(); - this._columns.forEach(column => { - const thItem = reverseThList.find(th => th.field === column.field); + this._columns.forEach((column) => { + const thItem = reverseThList.find((th) => th.field === column.field); if (thItem) { column.width = thItem.width + 'px'; } @@ -906,7 +908,7 @@ export class DataTableComponent implements OnDestroy, OnInit, OnChanges, AfterCo lastCol.width = newSize; this.tableWidthConfig[this.tableWidthConfig.length - 1].width = newSize; } else if (this._lastColSize < lastColWidth) { - const lastChange = (lastColWidth - this._lastColSize) > changeSize ? changeSize : (lastColWidth - this._lastColSize); + const lastChange = lastColWidth - this._lastColSize > changeSize ? changeSize : lastColWidth - this._lastColSize; lastCol.width = lastColWidth - lastChange + 'px'; this.tableWidthConfig[this.tableWidthConfig.length - 1].width = lastColWidth - lastChange + 'px'; } @@ -947,8 +949,8 @@ export class DataTableComponent implements OnDestroy, OnInit, OnChanges, AfterCo onBodyScroll(event?: Event) { const target = event?.target - || this.normalScrollElement.nativeElement - || this.virtualScrollViewport.elementRef.nativeElement; + || this.normalScrollElement?.nativeElement + || this.virtualScrollViewport?.elementRef.nativeElement; if (this.isCellEdit) { // Y轴滚动距离超过tr高度时取消目前编辑状态 @@ -1036,7 +1038,7 @@ export class DataTableComponent implements OnDestroy, OnInit, OnChanges, AfterCo } private travelChildrenToggleStatus(data, open: boolean) { - return data.map(item => { + return data.map((item) => { if (item.children) { item.$isChildTableOpen = open; item.children = this.travelChildrenToggleStatus(item.children, open); @@ -1054,7 +1056,7 @@ export class DataTableComponent implements OnDestroy, OnInit, OnChanges, AfterCo loadAllChildrenResult = this.loadAllChildrenTable(); } loadAllChildrenResult.then(() => { - this.dataSource.forEach(item => { + this.dataSource.forEach((item) => { if (item.$checked && item.children) { this.setCheckedStatus(item.children, true, true); } @@ -1072,7 +1074,7 @@ export class DataTableComponent implements OnDestroy, OnInit, OnChanges, AfterCo } private collectCheckedRows(dist: Array, source: Array) { - source.forEach(row => { + source.forEach((row) => { if (row.$checked) { dist.push(row); } @@ -1085,7 +1087,7 @@ export class DataTableComponent implements OnDestroy, OnInit, OnChanges, AfterCo getCheckedRows() { if (this.checkableRelation.upward) { // 如果children的选中状态关联parent的选中状态,只需返回最外层的数据 - return this.dataSource ? this.dataSource.filter(item => item.$checked || item.$halfChecked) : []; + return this.dataSource ? this.dataSource.filter((item) => item.$checked || item.$halfChecked) : []; } else { // 如果children的选中状态不关联parent的选中状态,遍历dataSource,将所有的选中行平级返回 const checkedRows = []; @@ -1095,24 +1097,27 @@ export class DataTableComponent implements OnDestroy, OnInit, OnChanges, AfterCo } setTableCheckStatus(status: TableCheckStatusArg) { - if (status.pageAllChecked !== undefined) { // 设置全选 + if (status.pageAllChecked !== undefined) { + // 设置全选 if (this.dataSource) { this._dataSource = this.setCheckedStatus(this.dataSource, status.pageAllChecked); } this._pageAllChecked = status.pageAllChecked; - if (status.pageAllChecked) { // 全选为true + if (status.pageAllChecked) { + // 全选为true this.halfChecked = false; } else { this.halfChecked = this.dataSource.some(this.hasChecked) && this.dataSource.some(this.hasUnChecked); } } - if (status.pageHalfChecked !== undefined) { // 设置半选 + if (status.pageHalfChecked !== undefined) { + // 设置半选 this.halfChecked = status.pageHalfChecked; } if (this.innerHeader) { - this.innerHeader.setHeaderCheckStatus({pageAllChecked: this._pageAllChecked, pageHalfChecked: this.halfChecked}); + this.innerHeader.setHeaderCheckStatus({ pageAllChecked: this._pageAllChecked, pageHalfChecked: this.halfChecked }); } } diff --git a/devui/data-table/demo/async/data-table-demo-async.component.ts b/devui/data-table/demo/async/data-table-demo-async.component.ts index 0fe7287f..66735490 100755 --- a/devui/data-table/demo/async/data-table-demo-async.component.ts +++ b/devui/data-table/demo/async/data-table-demo-async.component.ts @@ -1,18 +1,16 @@ import { ChangeDetectorRef, Component, OnInit } from '@angular/core'; -import { LoadingType } from 'ng-devui/loading'; -import { Observable, timer } from 'rxjs'; -import { originSource, SourceType } from '../mock-data'; +import { timer } from 'rxjs'; +import { SourceType, originSource } from '../mock-data'; @Component({ selector: 'd-datatable-demo-async', - templateUrl: './data-table-demo-async.component.html' + templateUrl: './data-table-demo-async.component.html', }) export class DatatableDemoAsyncComponent implements OnInit { /* get Async DataSource*/ remoteDataSource: Array = []; showLoading = false; - loading: LoadingType; colChanged = false; columns = [ @@ -39,19 +37,12 @@ export class DatatableDemoAsyncComponent implements OnInit { header: 'Date of birth', fieldType: 'date', sortable: true, - } + }, ]; colDataOptions = this.columns.slice(0, 3); - constructor(private changeDetectorRef: ChangeDetectorRef) { - this.loading = new Observable((function (observer) { - if (this.complete) { - observer.onNext(this.complete); - observer.onCompleted(); - } - }).bind(this)); - } + constructor(private changeDetectorRef: ChangeDetectorRef) {} getRemoteData() { this.remoteDataSource = []; @@ -72,6 +63,5 @@ export class DatatableDemoAsyncComponent implements OnInit { this.colChanged = !this.colChanged; } - ngOnInit() { - } + ngOnInit() {} } diff --git a/devui/data-table/demo/drag-row/drag-row.component.ts b/devui/data-table/demo/drag-row/drag-row.component.ts index f9e6d8f0..33063e4c 100644 --- a/devui/data-table/demo/drag-row/drag-row.component.ts +++ b/devui/data-table/demo/drag-row/drag-row.component.ts @@ -1,70 +1,64 @@ -import { Component, OnInit } from '@angular/core'; +import { Component } from '@angular/core'; import { TableWidthConfig } from 'ng-devui/data-table'; -import { originSource, SourceType } from '../mock-data'; +import { SourceType, originSource } from '../mock-data'; @Component({ selector: 'd-drag-row', templateUrl: './drag-row.component.html', - styleUrls: ['./drag-row.component.scss'] + styleUrls: ['./drag-row.component.scss'], }) -export class DragRowComponent implements OnInit { +export class DragRowComponent { basicDataSource: Array = JSON.parse(JSON.stringify(originSource.slice(0, 6))); dataTableOptions = { columns: [ { field: 'firstName', header: 'First Name', - fieldType: 'text' + fieldType: 'text', }, { field: 'lastName', header: 'Last Name', - fieldType: 'text' + fieldType: 'text', }, { field: 'gender', header: 'Gender', - fieldType: 'text' + fieldType: 'text', }, { field: 'dob', header: 'Date of birth', - fieldType: 'date' - } - ] + fieldType: 'date', + }, + ], }; tableWidthConfig: TableWidthConfig[] = [ { field: 'drag', - width: '4%' + width: '4%', }, { field: 'firstName', - width: '24%' + width: '24%', }, { field: 'lastName', - width: '24%' + width: '24%', }, { field: 'gender', - width: '24%' + width: '24%', }, { field: 'dob', - width: '24%' - } + width: '24%', + }, ]; - constructor() { } - ngOnInit() { - } - removeItem(item: any, list: Array) { - const index = list.map(function (e) { - return e.name; - }).indexOf(item.name); + const index = list.map((e) => e.name).indexOf(item.name); list.splice(index, 1); } diff --git a/devui/data-table/demo/interaction-column/interaction-column.component.ts b/devui/data-table/demo/interaction-column/interaction-column.component.ts index eb8308f7..de41a99d 100644 --- a/devui/data-table/demo/interaction-column/interaction-column.component.ts +++ b/devui/data-table/demo/interaction-column/interaction-column.component.ts @@ -1,12 +1,12 @@ import { ChangeDetectorRef, Component, OnInit, ViewChild } from '@angular/core'; import { DataTableComponent, FilterConfig, SortDirection, SortEventArg } from 'ng-devui/data-table'; import { LoadingType } from 'ng-devui/loading'; -import { originSource, SourceType } from '../mock-data'; +import { SourceType, originSource } from '../mock-data'; @Component({ selector: 'd-interaction-column', templateUrl: './interaction-column.component.html', - styleUrls: ['./interaction-column.component.scss'] + styleUrls: ['./interaction-column.component.scss'], }) export class InteractionColumnComponent implements OnInit { @@ -17,45 +17,50 @@ export class InteractionColumnComponent implements OnInit { { name: 'Clear', value: 'Clear', - }, { + }, + { name: 'Male', value: 'Male', - selected: true - }, { + selected: true, + }, + { name: 'Female', value: 'Female', - }]; + }, + ]; filterList = [ { name: 'Mark', - value: 'Mark' + value: 'Mark', }, { name: 'Jacob', - value: 'Jacob' + value: 'Jacob', }, { name: 'Danni', - value: 'Danni' + value: 'Danni', }, { name: 'green', - value: 'green' + value: 'green', }, { name: 'po', - value: 'po' + value: 'po', }, { name: 'john', - value: 'john' - } + value: 'john', + }, ]; filterListMulti = JSON.parse(JSON.stringify(originSource.slice(0, 6))); - sortedColumn: SortEventArg[] = [{ + sortedColumn: SortEventArg[] = [ + { field: 'lastName', - direction: SortDirection.ASC - }]; + direction: SortDirection.ASC, + }, + ]; hideColumn = ['hidden']; total = 20; next = 1; @@ -67,11 +72,11 @@ export class InteractionColumnComponent implements OnInit { halfChecked = false; filterIconActive = false; - constructor(private ref: ChangeDetectorRef) { } + constructor(private ref: ChangeDetectorRef) {} ngOnInit() { this.checkboxList = JSON.parse(JSON.stringify(originSource.slice(0, 6))); this.filterChangeRadio(this.filterList2[1]); - this.sortableDataSource[0]['$checkDisabled'] = true; + (this.sortableDataSource[0] as any).$checkDisabled = true; } changePageContent($event) { @@ -93,7 +98,7 @@ export class InteractionColumnComponent implements OnInit { } const filterList = $event.name; const dataDisplay = []; - JSON.parse(JSON.stringify(originSource.slice(0, 6))).forEach(item => { + JSON.parse(JSON.stringify(originSource.slice(0, 6))).forEach((item) => { if (filterList.includes(item.gender)) { dataDisplay.push(item); } @@ -102,9 +107,9 @@ export class InteractionColumnComponent implements OnInit { } filterChangeMultiple($event) { - const filterList = $event.map(item => item.name); + const filterList = $event.map((item) => item.name); const dataDisplay = []; - JSON.parse(JSON.stringify(originSource.slice(0, 6))).forEach(item => { + JSON.parse(JSON.stringify(originSource.slice(0, 6))).forEach((item) => { if (filterList.includes(item.firstName)) { dataDisplay.push(item); } @@ -129,7 +134,7 @@ export class InteractionColumnComponent implements OnInit { } setHalfChecked() { this.halfChecked = false; - const chosen = this.checkboxList.filter(item => item.chosen); + const chosen = this.checkboxList.filter((item) => item.chosen); if (chosen.length === this.checkboxList.length) { this.allChecked = true; } else if (chosen.length > 0) { @@ -141,7 +146,7 @@ export class InteractionColumnComponent implements OnInit { } filterSource(dropdown) { - this.sortableDataSource = this.checkboxList.filter(item => item.chosen); + this.sortableDataSource = this.checkboxList.filter((item) => item.chosen); this.filterIconActive = true; dropdown.toggle(); } diff --git a/devui/data-table/demo/interaction/interaction.component.ts b/devui/data-table/demo/interaction/interaction.component.ts index d1f3e921..5cd041ed 100644 --- a/devui/data-table/demo/interaction/interaction.component.ts +++ b/devui/data-table/demo/interaction/interaction.component.ts @@ -5,7 +5,7 @@ import { SourceType, originSource } from '../mock-data'; @Component({ selector: 'd-interaction', templateUrl: './interaction.component.html', - styleUrls: ['./interaction.component.scss'] + styleUrls: ['./interaction.component.scss'], }) export class InteractionComponent implements OnInit { @ViewChild(DataTableComponent, { static: true }) datatable: DataTableComponent; @@ -14,39 +14,41 @@ export class InteractionComponent implements OnInit { { name: 'Clear', value: 'Clear', - }, { + }, + { name: 'Male', value: 'Male', - }, { + }, + { name: 'Female', value: 'Female', - } + }, ]; firstFilterList = [ { name: 'Mark', - value: 'Mark' + value: 'Mark', }, { name: 'Jacob', - value: 'Jacob' + value: 'Jacob', }, { name: 'Danni', - value: 'Danni' + value: 'Danni', }, { name: 'green', - value: 'green' + value: 'green', }, { name: 'po', - value: 'po' + value: 'po', }, { name: 'john', - value: 'john' + value: 'john', }, ]; @@ -55,55 +57,52 @@ export class InteractionComponent implements OnInit { tableWidthConfig: TableWidthConfig[] = [ { field: 'checkbox', - width: '41px' + width: '41px', }, { field: '$index', - width: '100px' + width: '100px', }, { field: 'firstName', - width: '100px' + width: '100px', }, { field: 'lastName', - width: '100px' + width: '100px', }, { field: 'gender', - width: '100px' + width: '100px', }, { field: 'dob', - width: '100px' + width: '100px', }, { field: 'description', - width: '100px' - } + width: '100px', + }, ]; lastNameSortDirection = SortDirection.ASC; genderSortDirection = SortDirection.default; - sortParams = {field: 'lastName', direction: this.lastNameSortDirection}; + sortParams = { field: 'lastName', direction: this.lastNameSortDirection }; checkboxList = []; allChecked = false; halfChecked = false; filterIconActive = false; - constructor( - private ref: ChangeDetectorRef, - private ele: ElementRef - ) { } + constructor(private ref: ChangeDetectorRef, private ele: ElementRef) {} ngOnInit() { this.checkboxList = JSON.parse(JSON.stringify(originSource.slice(0, 6))); - this.sortableDataSource[0]['$checkDisabled'] = true; + (this.sortableDataSource[0] as any).$checkDisabled = true; } onSortChange(event: SortEventArg, field) { this.sortParams = { field: field, - direction: event.direction + direction: event.direction, }; } @@ -116,7 +115,7 @@ export class InteractionComponent implements OnInit { } const filterList = $event.name; const dataDisplay = []; - JSON.parse(JSON.stringify(originSource.slice(0, 6))).forEach(item => { + JSON.parse(JSON.stringify(originSource.slice(0, 6))).forEach((item) => { if (filterList.includes(item.gender)) { dataDisplay.push(item); } @@ -125,9 +124,9 @@ export class InteractionComponent implements OnInit { } onFirstFilterChange($event) { - const filterList = $event.map(item => item.name); + const filterList = $event.map((item) => item.name); const dataDisplay = []; - JSON.parse(JSON.stringify(originSource.slice(0, 6))).forEach(item => { + JSON.parse(JSON.stringify(originSource.slice(0, 6))).forEach((item) => { if (filterList.includes(item.firstName)) { dataDisplay.push(item); } @@ -148,7 +147,7 @@ export class InteractionComponent implements OnInit { rowIndex: rowIndex, nestedIndex: nestedIndex, rowItem: rowItem, - checked: checked + checked: checked, }); } @@ -157,7 +156,7 @@ export class InteractionComponent implements OnInit { } setHalfChecked() { this.halfChecked = false; - const chosen = this.checkboxList.filter(item => item.chosen); + const chosen = this.checkboxList.filter((item) => item.chosen); if (chosen.length === this.checkboxList.length) { this.allChecked = true; } else if (chosen.length > 0) { @@ -169,7 +168,7 @@ export class InteractionComponent implements OnInit { } filterSource(dropdown) { - this.sortableDataSource = this.checkboxList.filter(item => item.chosen); + this.sortableDataSource = this.checkboxList.filter((item) => item.chosen); this.filterIconActive = true; dropdown.toggle(); } diff --git a/devui/data-table/doc/api-cn.md b/devui/data-table/doc/api-cn.md index 2c8f5431..20169169 100644 --- a/devui/data-table/doc/api-cn.md +++ b/devui/data-table/doc/api-cn.md @@ -534,6 +534,7 @@ advancedHeader: Array < { | save | `EventEmitter` | 返回操作改变之后的数据 | [大数据量树形表格基本用法](demo#virtual-scroll-tree-table-basic) | | allChecked | `EventEmitter` | 返回表头复选框状态 | [大数据量树形表格交互](demo#virtual-scroll-tree-table-interaction) | | dropRow | `EventEmitter` | 表格行拖拽的投放事件 | [大数据量树形表格拖拽](demo#virtual-scroll-tree-table-multi-drag) | +| tableRenderEnd | `EventEmitter` | 表格数据变更后渲染完成的回调事件 | | 原datatable事件都可以透传，支持multiSortChange，cellClick，cellDBClick，rowClick，rowDBClick，cellEditStart，cellEditEnd，resize事件。 diff --git a/devui/data-table/doc/api-en.md b/devui/data-table/doc/api-en.md index 45f14390..583e2f9d 100644 --- a/devui/data-table/doc/api-en.md +++ b/devui/data-table/doc/api-en.md @@ -518,6 +518,7 @@ Note: Empty cells also need to be indicated. Set rowspan/colspan to 0 based on t | save | `EventEmitter` | Returns the data after the operation is changed. | [Tree table with a large amount of data Basic](demo#virtual-scroll-tree-table-basic) | | allChecked | `EventEmitter` | Return to Table Header Checkbox Status. | [Tree table with a large amount of data Interaction](demo#virtual-scroll-tree-table-interaction) | | dropRow | `EventEmitter` | Placement event of dragging a table row | [Dragging a tree table with a large amount of data](demo#virtual-scroll-tree-table-multi-drag) | +| tableRenderEnd | `EventEmitter` | Callback event indicating that rendering is complete after table data is changed. | | The original datatable events can be transparently transmitted. The multiSortChange, cellClick, cellDBClick, rowClick, rowDBClick, cellEditStart, cellEditEnd, and resize events are supported. diff --git a/devui/data-table/force-update-reason.model.ts b/devui/data-table/force-update-reason.model.ts index fe2d2ebf..b2634e54 100755 --- a/devui/data-table/force-update-reason.model.ts +++ b/devui/data-table/force-update-reason.model.ts @@ -1,3 +1,3 @@ export enum ForceUpdateReason { - RowUpdate + RowUpdate = 0, } diff --git a/devui/data-table/table-option-modal.component.ts b/devui/data-table/table-option-modal.component.ts index 384d0bd1..e29f3e2a 100644 --- a/devui/data-table/table-option-modal.component.ts +++ b/devui/data-table/table-option-modal.component.ts @@ -15,7 +15,7 @@ export class TableOptionModalComponent implements OnInit { } get selectedCols() { - return this._columnsData.filter(t => t.checked); + return this._columnsData.filter((t) => t.checked); } _columnsData: Array = []; @@ -27,9 +27,7 @@ export class TableOptionModalComponent implements OnInit { allChecked = false; halfCheck = false; - constructor( - private cdr: ChangeDetectorRef - ) {} + constructor(private cdr: ChangeDetectorRef) {} judgeNameFIlter(name: string) { return name.toUpperCase().includes(this.filterKey.toUpperCase()); @@ -38,7 +36,7 @@ export class TableOptionModalComponent implements OnInit { onCheckedChanges() { this.allChecked = true; this.halfCheck = false; - this.columnsCache.forEach(t => { + this.columnsCache.forEach((t) => { if (!t.checked) { this.allChecked = false; } @@ -47,13 +45,13 @@ export class TableOptionModalComponent implements OnInit { this.halfCheck = true; } }); - this.halfCheck = (this.halfCheck && !this.allChecked) ? true : false; + this.halfCheck = this.halfCheck && !this.allChecked ? true : false; } onAllCheckChanges(checked: boolean) { this.halfCheck = false; this.allChecked = checked; - this.columnsCache.forEach(t => { + this.columnsCache.forEach((t) => { if (t.disabled) { return; } @@ -74,7 +72,7 @@ export class TableOptionModalComponent implements OnInit { } searchIndex(col) { - return this.data.columnsData.findIndex(t => t.header === col?.header); + return this.data.columnsData.findIndex((t) => t.header === col?.header); } onDrop(e) { @@ -91,20 +89,21 @@ export class TableOptionModalComponent implements OnInit { } onCardActiveChanges(active: boolean, status: 'xs' | 'sm' | 'md') { - this._styleSetting['size'] = active ? status : 'none'; + this._styleSetting.size = active ? status : 'none'; } styleSettingChanges(checked, type: 'border' | 'striped' | 'shadow') { switch (type) { case 'border': - this._styleSetting['borderType'] = checked ? '' : 'borderless'; + this._styleSetting.borderType = checked ? '' : 'borderless'; break; case 'shadow': - this._styleSetting['shadowType'] = checked ? 'normal' : 'embed'; + this._styleSetting.shadowType = checked ? 'normal' : 'embed'; break; case 'striped': - this._styleSetting['striped'] = checked; + this._styleSetting.striped = checked; break; + default: } } diff --git a/devui/data-table/table-option-toggle.component.ts b/devui/data-table/table-option-toggle.component.ts index 1b76c0d6..160cd02e 100644 --- a/devui/data-table/table-option-toggle.component.ts +++ b/devui/data-table/table-option-toggle.component.ts @@ -26,10 +26,10 @@ export interface TableStyleData { styleUrls: ['./table-option-toggle.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush, }) -export class TableOptionToggleComponent implements OnInit, OnDestroy{ +export class TableOptionToggleComponent implements OnInit, OnDestroy { @Input() set columnsData(value: Array) { this._columnsData = cloneDeep(value); - }; + } @Input() showCategory: boolean; @Input() colSort = true; @Input() styleSetting: TableStyleData = {}; @@ -52,21 +52,17 @@ export class TableOptionToggleComponent implements OnInit, OnDestroy{ } set sizeStatus(value) { - if(!this.styleSetting) { + if (!this.styleSetting) { this.styleSetting = {}; } - this.styleSetting['size'] = value; + this.styleSetting.size = value; } i18nText: I18nInterface['datatable']; i18nLocale: I18nInterface['locale']; i18nSubscription: Subscription; - constructor( - private modalService: ModalService, - private cdr: ChangeDetectorRef, - private i18n: I18nService - ){} + constructor(private modalService: ModalService, private cdr: ChangeDetectorRef, private i18n: I18nService) {} ngOnInit(): void { this.i18nText = this.i18n.getI18nText().datatable; @@ -113,6 +109,7 @@ export class TableOptionToggleComponent implements OnInit, OnDestroy{ case 'striped': this.styleSetting.striped = checked; break; + default: } this.emitStyles(); diff --git a/devui/data-table/table/body/td/td.component.ts b/devui/data-table/table/body/td/td.component.ts index 7f1d9937..41d9876d 100644 --- a/devui/data-table/table/body/td/td.component.ts +++ b/devui/data-table/table/body/td/td.component.ts @@ -1,9 +1,12 @@ -import { - Component, ElementRef, EventEmitter, - HostBinding, Input, OnChanges, OnDestroy, OnInit, - Output, SimpleChanges -} from '@angular/core'; -import { fromEvent, Observable, Subscription } from 'rxjs'; +import { Component, + ElementRef, + EventEmitter, HostBinding, + Input, + OnChanges, + OnDestroy, + Output, + SimpleChanges, } from '@angular/core'; +import { Observable, Subscription, fromEvent } from 'rxjs'; import { tap } from 'rxjs/operators'; import { EditableTip } from '../../../data-table.model'; import { TableTdService } from './td.service'; @@ -12,9 +15,9 @@ import { TableTdService } from './td.service'; /* eslint-disable-next-line @angular-eslint/component-selector*/ selector: '[dTableCell]', templateUrl: './td.component.html', - styleUrls: ['./td.component.scss'] + styleUrls: ['./td.component.scss'], }) -export class TableTdComponent implements OnInit, OnChanges, OnDestroy { +export class TableTdComponent implements OnChanges, OnDestroy { @HostBinding('class.devui-sticky-left-cell') stickyLeftClass: boolean; @HostBinding('class.devui-sticky-right-cell') stickyRightClass: boolean; @HostBinding('style.left') stickyLeftStyle: string; @@ -50,12 +53,12 @@ export class TableTdComponent implements OnInit, OnChanges, OnDestroy { private clickInTd: boolean; private tdClickSubscription: Subscription; private currentEditing = false; - constructor(private elementRef: ElementRef, private tdService: TableTdService) { } - ngOnInit() {} + constructor(private elementRef: ElementRef, private tdService: TableTdService) {} ngOnChanges(changes: SimpleChanges): void { - if (changes['fixedLeft']) { + const { fixedLeft, fixedRight, editing } = changes; + if (fixedLeft) { if (this.fixedLeft) { this.stickyLeftClass = true; this.stickyLeftStyle = this.fixedLeft; @@ -65,7 +68,7 @@ export class TableTdComponent implements OnInit, OnChanges, OnDestroy { } } - if (changes['fixedRight']) { + if (fixedRight) { if (this.fixedRight) { this.stickyRightClass = true; this.stickyRightStyle = this.fixedRight; @@ -75,7 +78,7 @@ export class TableTdComponent implements OnInit, OnChanges, OnDestroy { } } - if (changes['editing'] && changes['editing'].currentValue && !this.currentEditing) { + if (editing?.currentValue && !this.currentEditing) { this.bindEditClickEvent(); } } @@ -110,21 +113,23 @@ export class TableTdComponent implements OnInit, OnChanges, OnDestroy { } bindEditClickEvent() { - this.documentClickSubscription = fromEvent(document, 'click').pipe( + this.documentClickSubscription = fromEvent(document, 'click') + .pipe( tap((e: Event) => { e.stopPropagation(); }) - ).subscribe((clickEvent) => { + ) + .subscribe((clickEvent) => { if (!this.elementRef.nativeElement.contains(clickEvent.target) && !this.clickInTd) { this.finishCellEdit(); } this.clickInTd = false; }); - this.tdMousedownSubscription = fromEvent(this.elementRef.nativeElement, 'mousedown').subscribe(event => { + this.tdMousedownSubscription = fromEvent(this.elementRef.nativeElement, 'mousedown').subscribe((event) => { this.clickInTd = true; }); - this.tdMouseupSubscription = fromEvent(this.elementRef.nativeElement, 'mouseup').subscribe(event => { + this.tdMouseupSubscription = fromEvent(this.elementRef.nativeElement, 'mouseup').subscribe((event) => { this.clickInTd = false; }); diff --git a/devui/data-table/table/head/th/filter/filter.component.ts b/devui/data-table/table/head/th/filter/filter.component.ts index 7fa38f0b..b1f9aa82 100644 --- a/devui/data-table/table/head/th/filter/filter.component.ts +++ b/devui/data-table/table/head/th/filter/filter.component.ts @@ -1,11 +1,22 @@ import { DOCUMENT } from '@angular/common'; import { - ChangeDetectorRef, Component, EventEmitter, HostBinding, Inject, Input, OnChanges, OnDestroy, OnInit, - Output, SimpleChanges, TemplateRef, ViewChild + ChangeDetectorRef, + Component, + EventEmitter, + HostBinding, + Inject, + Input, + OnChanges, + OnDestroy, + OnInit, + Output, + SimpleChanges, + TemplateRef, + ViewChild, } from '@angular/core'; import { DropDownDirective } from 'ng-devui/dropdown'; import { I18nInterface, I18nService } from 'ng-devui/i18n'; -import { BehaviorSubject, Observable, of, Subscription } from 'rxjs'; +import { BehaviorSubject, Observable, Subscription, of } from 'rxjs'; import { switchMap } from 'rxjs/operators'; import { FilterConfig } from '../../../../data-table.model'; import { TABLE_TH } from '../th.token'; @@ -13,7 +24,7 @@ import { TABLE_TH } from '../th.token'; @Component({ selector: 'd-table-filter', templateUrl: './filter.component.html', - styleUrls: ['./filter.component.scss'] + styleUrls: ['./filter.component.scss'], }) export class FilterComponent implements OnInit, OnChanges, OnDestroy { @Input() beforeFilter: (value) => boolean | Promise | Observable; @@ -65,8 +76,13 @@ export class FilterComponent implements OnInit, OnChanges, OnDestroy { DEBONCE_TIME = 300; document: Document; filterPadding = 26; - constructor(private ref: ChangeDetectorRef, private i18n: I18nService, @Inject(TABLE_TH) private thComponent: any, - @Inject(DOCUMENT) private doc: any) { + + constructor( + private ref: ChangeDetectorRef, + private i18n: I18nService, + @Inject(TABLE_TH) private thComponent: any, + @Inject(DOCUMENT) private doc: any + ) { this.i18nCommonText = this.i18n.getI18nText().common; this.document = this.doc; } @@ -74,10 +90,7 @@ export class FilterComponent implements OnInit, OnChanges, OnDestroy { ngOnInit() { if (!this.searchFn) { this.searchFn = (item) => { - return of( - (this.filterList ? this.filterList : []) - .filter(value => value.name.toLowerCase().includes(item.toLowerCase())) - ); + return of((this.filterList ? this.filterList : []).filter((value) => value.name.toLowerCase().includes(item.toLowerCase()))); }; } this.i18nSubscription = this.i18n.langChange().subscribe((data) => { @@ -86,14 +99,17 @@ export class FilterComponent implements OnInit, OnChanges, OnDestroy { } ngOnChanges(changes: SimpleChanges): void { - if (changes['filterList'] || changes['filterMultiple'] || changes['filterIconActive']) { - if (this.filterIconActive !== undefined) { return; } + const { filterList, filterMultiple, filterIconActive } = changes; + if (filterList || filterMultiple || filterIconActive) { + if (this.filterIconActive !== undefined) { + return; + } if (this.filterList) { if (!this.filterMultiple) { - this.selectedItem = this.filterList.filter(item => item.selected)[0]; - this.filterIconActiveInner = (this.selectedItem !== undefined && !!Object.keys(this.selectedItem).length); + this.selectedItem = this.filterList.filter((item) => item.selected)[0]; + this.filterIconActiveInner = this.selectedItem !== undefined && !!Object.keys(this.selectedItem).length; } else { - const checkedList = this.filterList.filter(item => item.checked); + const checkedList = this.filterList.filter((item) => item.checked); if (checkedList.length) { this.filterIconActiveInner = true; } else { @@ -111,19 +127,21 @@ export class FilterComponent implements OnInit, OnChanges, OnDestroy { getFilterDataMultiple() { // 兼容当前当用户未传入id时，使用name做重名判断 - const keyValue = this.checkedListForFilter.length - ? Object.prototype.hasOwnProperty.call(this.checkedListForFilter[0], 'id') ? 'id' : 'name' : ''; - const checkedList = this.removeDuplication(this.checkedListForFilter, keyValue).filter(item => item.checked); + let keyValue = ''; + if (this.checkedListForFilter.length) { + keyValue = Object.prototype.hasOwnProperty.call(this.checkedListForFilter[0], 'id') ? 'id' : 'name'; + } + const checkedList = this.removeDuplication(this.checkedListForFilter, keyValue).filter((item) => item.checked); this.setFilterIconActive(checkedList); this.filterChange.emit(checkedList); } resetFilterData() { this.isDirty = false; - this.filterList.forEach(t => { + this.filterList.forEach((t) => { t.checked = false; }); - this.filterListDisplay.forEach(t => { + this.filterListDisplay.forEach((t) => { t.checked = false; }); this.setFilterIconActive([]); @@ -194,10 +212,14 @@ export class FilterComponent implements OnInit, OnChanges, OnDestroy { const tableViewElement = this.thComponent.tableViewRefElement.nativeElement.querySelector('.devui-scrollbar.scroll-view'); if ($event) { this.document.addEventListener('scroll', this.onContainerScroll); - if (tableViewElement) { tableViewElement.addEventListener('scroll', this.onContainerScroll); } + if (tableViewElement) { + tableViewElement.addEventListener('scroll', this.onContainerScroll); + } } else { this.document.removeEventListener('scroll', this.onContainerScroll); - if (tableViewElement) { tableViewElement.removeEventListener('scroll', this.onContainerScroll); } + if (tableViewElement) { + tableViewElement.removeEventListener('scroll', this.onContainerScroll); + } } } this.searchText = ''; @@ -215,12 +237,14 @@ export class FilterComponent implements OnInit, OnChanges, OnDestroy { this.registerFilterChange(); } }); - const keyValue = this.checkedListForFilter.length - ? Object.prototype.hasOwnProperty.call(this.checkedListForFilter[0], 'id') ? 'id' : 'name' : ''; - const checkedList = this.removeDuplication(this.checkedListForFilter, keyValue).filter(item => item.checked); + let keyValue = ''; + if (this.checkedListForFilter.length) { + keyValue = Object.prototype.hasOwnProperty.call(this.checkedListForFilter[0], 'id') ? 'id' : 'name'; + } + const checkedList = this.removeDuplication(this.checkedListForFilter, keyValue).filter((item) => item.checked); this.filterToggle.emit({ isOpen: $event, - checklist: checkedList + checklist: checkedList, }); } @@ -229,15 +253,15 @@ export class FilterComponent implements OnInit, OnChanges, OnDestroy { this.isDirty = true; // 全选时只针对当前面板操作，全不选时针对所有数据 if ($event) { - this.filterListDisplay.forEach(item => { + this.filterListDisplay.forEach((item) => { item.checked = $event; this.checkedListForFilter.push(item); }); } else { - this.filterListDisplay.forEach(item => { + this.filterListDisplay.forEach((item) => { item.checked = $event; }); - this.filterList.forEach(item => { + this.filterList.forEach((item) => { item.checked = $event; this.checkedListForFilter.push(item); }); @@ -246,7 +270,7 @@ export class FilterComponent implements OnInit, OnChanges, OnDestroy { setHalfChecked() { this.filterHalfChecked = false; - const checked = this.filterListDisplay.filter(item => item.checked); + const checked = this.filterListDisplay.filter((item) => item.checked); if (checked.length && checked.length === this.filterListDisplay.length) { this.filterAllChecked = true; } else if (checked.length > 0) { @@ -269,9 +293,9 @@ export class FilterComponent implements OnInit, OnChanges, OnDestroy { registerFilterChange(): void { this.sourceSubject = new BehaviorSubject(''); - this.sourceSubscription = this.sourceSubject.pipe(switchMap(term => this.searchFn(term))).subscribe(options => { + this.sourceSubscription = this.sourceSubject.pipe(switchMap((term) => this.searchFn(term))).subscribe((options) => { this.filterListDisplay = options; - this.checkedListForFilter.push(...options.filter(item => item.checked)); + this.checkedListForFilter.push(...options.filter((item) => item.checked)); this.setHalfChecked(); this.ref.markForCheck(); }); diff --git a/devui/data-table/table/head/th/th.component.ts b/devui/data-table/table/head/th/th.component.ts index 39043497..580f5682 100644 --- a/devui/data-table/table/head/th/th.component.ts +++ b/devui/data-table/table/head/th/th.component.ts @@ -1,8 +1,21 @@ import { DOCUMENT } from '@angular/common'; import { - ChangeDetectorRef, Component, ElementRef, EventEmitter, - forwardRef, HostBinding, HostListener, Inject, Input, - NgZone, OnChanges, OnDestroy, Output, Renderer2, SimpleChanges, TemplateRef + ChangeDetectorRef, + Component, + ElementRef, + EventEmitter, + forwardRef, + HostBinding, + HostListener, + Inject, + Input, + NgZone, + OnChanges, + OnDestroy, + Output, + Renderer2, + SimpleChanges, + TemplateRef } from '@angular/core'; import { fromEvent, Observable, Subscription } from 'rxjs'; import { FilterConfig, SortDirection, SortEventArg } from '../../../data-table.model'; @@ -13,10 +26,12 @@ import { TABLE_TH } from './th.token'; selector: '[dHeadCell]', templateUrl: './th.component.html', styleUrls: ['./th.component.scss'], - providers: [{ + providers: [ + { provide: TABLE_TH, - useExisting: forwardRef(() => TableThComponent) - }], + useExisting: forwardRef(() => TableThComponent), + }, + ], }) export class TableThComponent implements OnChanges, OnDestroy { @HostBinding('class.resizeable') resizeEnabledClass = false; @@ -57,7 +72,13 @@ export class TableThComponent implements OnChanges, OnDestroy { @Input() colDraggable: boolean; @Input() nestedColumn: boolean; + /** + * @depreted 存在xxs风险，使用方需根据自身场景做好防护 + */ @Input() iconFoldTable: string; + /** + * @depreted 存在xxs风险，使用方需根据自身场景做好防护 + */ @Input() iconUnFoldTable: string; @Input() tableViewRefElement: ElementRef; @@ -98,14 +119,20 @@ export class TableThComponent implements OnChanges, OnDestroy { @Input() column: any; // 为配置column方式兼容自定义过滤模板context document: Document; - constructor(element: ElementRef, private renderer2: Renderer2, private zone: NgZone, private cdr: ChangeDetectorRef, - @Inject(DOCUMENT) private doc: any) { + constructor( + element: ElementRef, + private renderer2: Renderer2, + private zone: NgZone, + private cdr: ChangeDetectorRef, + @Inject(DOCUMENT) private doc: any + ) { this.element = element.nativeElement; this.document = this.doc; } ngOnChanges(changes: SimpleChanges): void { - if (changes['resizeEnabled']) { + const { resizeEnabled, filterable, sortable, colDraggable, filterIconActive, sortDirection, fixedLeft, fixedRight } = changes; + if (resizeEnabled) { if (this.resizeEnabled) { this.resizeEnabledClass = true; if (!this.resizeHandleElement) { @@ -119,7 +146,7 @@ export class TableThComponent implements OnChanges, OnDestroy { } } - if (changes['filterable'] || changes['sortable'] || changes['resizeEnabled'] || changes['colDraggable']) { + if (filterable || sortable || resizeEnabled || colDraggable) { if (this.filterable || this.sortable || this.resizeEnabled || this.colDraggable) { this.operableClass = true; } else { @@ -127,7 +154,7 @@ export class TableThComponent implements OnChanges, OnDestroy { } } - if (changes['filterIconActive']) { + if (filterIconActive) { if (this.filterIconActive) { this.filterActiveClass = true; } else { @@ -135,7 +162,7 @@ export class TableThComponent implements OnChanges, OnDestroy { } } - if (changes['sortDirection']) { + if (sortDirection) { if (this.sortDirection === SortDirection.ASC || this.sortDirection === SortDirection.DESC) { this.sortActiveClass = true; } else { @@ -143,7 +170,7 @@ export class TableThComponent implements OnChanges, OnDestroy { } } - if (changes['fixedLeft']) { + if (fixedLeft) { if (this.fixedLeft) { this.stickyLeftClass = true; this.stickyLeftStyle = this.fixedLeft; @@ -152,7 +179,7 @@ export class TableThComponent implements OnChanges, OnDestroy { this.stickyLeftStyle = null; } } - if (changes['fixedRight']) { + if (fixedRight) { if (this.fixedRight) { this.stickyRightClass = true; this.stickyRightStyle = this.fixedRight; @@ -187,10 +214,7 @@ export class TableThComponent implements OnChanges, OnDestroy { this.filterChange.emit(filterData); } - emitFilterToggle(data: { - isOpen: boolean; - checklist: FilterConfig[]; - }) { + emitFilterToggle(data: { isOpen: boolean; checklist: FilterConfig[] }) { this.filterToggle.emit(data); } @@ -278,7 +302,7 @@ export class TableThComponent implements OnChanges, OnDestroy { this.resizing = false; // destroy overlay - this.renderer2.removeChild(this.element.firstElementChild, this.resizeOverlay); + this.renderer2.removeChild(this.element, this.resizeOverlay); this.renderer2.removeClass(this.tableViewRefElement.nativeElement, 'table-view-selector'); @@ -289,7 +313,7 @@ export class TableThComponent implements OnChanges, OnDestroy { this.renderer2.removeChild(this.tableElement, this.resizeBarRefElement); } - if(this.tableHeaderElement) { + if (this.tableHeaderElement) { this.renderer2.removeChild(this.tableHeaderElement, this.resizeBarRefElement); } @@ -325,7 +349,8 @@ export class TableThComponent implements OnChanges, OnDestroy { const overMinWidth = !this.minWidth || newWidth >= minWidth; const underMaxWidth = !this.maxWidth || newWidth <= maxWidth; - const finalWidth = !overMinWidth ? minWidth : !underMaxWidth ? maxWidth : newWidth; + const result = !underMaxWidth ? maxWidth : newWidth; + const finalWidth = !overMinWidth ? minWidth : result; return finalWidth; } diff --git a/devui/data-table/table/head/thead.component.ts b/devui/data-table/table/head/thead.component.ts index 169512a6..fd0f7c57 100644 --- a/devui/data-table/table/head/thead.component.ts +++ b/devui/data-table/table/head/thead.component.ts @@ -1,5 +1,14 @@ import { - AfterContentInit, Component, ContentChildren, EventEmitter, Input, OnChanges, OnDestroy, OnInit, QueryList, SimpleChanges + AfterContentInit, + Component, + ContentChildren, + EventEmitter, + Input, + OnChanges, + OnDestroy, + OnInit, + QueryList, + SimpleChanges, } from '@angular/core'; import { Subscription } from 'rxjs'; import { TableCheckOptions, TableCheckStatusArg } from '../../data-table.model'; @@ -9,7 +18,7 @@ import { TableThComponent } from './th/th.component'; @Component({ /* eslint-disable-next-line @angular-eslint/component-selector*/ selector: '[dTableHead]', - templateUrl: './thead.component.html' + templateUrl: './thead.component.html', }) export class TableTheadComponent implements OnInit, AfterContentInit, OnDestroy, OnChanges { @Input() checkable: boolean; @@ -27,7 +36,7 @@ export class TableTheadComponent implements OnInit, AfterContentInit, OnDestroy, headerCheckStatusEvent = new EventEmitter(); headerChildrenTableToggleEvent = new EventEmitter(); - constructor() { } + constructor() {} ngOnInit() {} @@ -56,10 +65,11 @@ export class TableTheadComponent implements OnInit, AfterContentInit, OnDestroy, } ngOnChanges(changes: SimpleChanges) { + const { checkable, checkDisabled, checkOptions } = changes; if ( - (changes['checkable'] && !changes['checkable'].isFirstChange()) || - (changes['checkDisabled'] && !changes['checkDisabled'].isFirstChange()) || - (changes['checkOptions'] && !changes['checkOptions'].isFirstChange()) + (checkable && !checkable.isFirstChange()) || + (checkDisabled && !checkDisabled.isFirstChange()) || + (checkOptions && !checkOptions.isFirstChange()) ) { if (this.headerFirstRow) { this.headerFirstRow.headerRowspan = this.headerRowList.length; @@ -72,7 +82,7 @@ export class TableTheadComponent implements OnInit, AfterContentInit, OnDestroy, } setNestedThToggle() { - this.nestedTh = this.thList.find(th => { + this.nestedTh = this.thList.find((th) => { return th.nestedColumn; }); diff --git a/devui/data-table/tmpl/data-table-column-tmpl.component.ts b/devui/data-table/tmpl/data-table-column-tmpl.component.ts index e543b0ec..117d51e2 100755 --- a/devui/data-table/tmpl/data-table-column-tmpl.component.ts +++ b/devui/data-table/tmpl/data-table-column-tmpl.component.ts @@ -6,7 +6,6 @@ import { Input, OnChanges, OnDestroy, - OnInit, Output, SimpleChanges, TemplateRef, @@ -22,16 +21,14 @@ import { DataTableHeadCellTmplComponent } from './data-table-head-cell-tmpl.comp template: '', changeDetection: ChangeDetectionStrategy.OnPush, }) -export class DataTableColumnTmplComponent implements OnChanges, OnDestroy, OnInit { +export class DataTableColumnTmplComponent implements OnChanges, OnDestroy { @Input() advancedHeader: Array<{ header: string; rowspan: number; colspan: number; [prop: string]: any; }>; - @Input() headCellApplyAll = false; - @Input() maxWidth: string; @Input() minWidth: string; @Input() field: string; @@ -79,15 +76,13 @@ export class DataTableColumnTmplComponent implements OnChanges, OnDestroy, OnIni // @deprecated @Input() fieldType = 'text'; - constructor() {} - ngOnInit(): void {} ngOnChanges(changes: SimpleChanges): void { - if (changes['order']) { - this.orderChange.emit(changes['order'].currentValue); + const { order, width } = changes; + if (order) { + this.orderChange.emit(order.currentValue); } - - if (changes['width']) { - this.widthChange.emit(changes['width'].currentValue); + if (width) { + this.widthChange.emit(width.currentValue); } } diff --git a/devui/data-table/utils/utils.ts b/devui/data-table/utils/utils.ts index d01d8a86..529858aa 100644 --- a/devui/data-table/utils/utils.ts +++ b/devui/data-table/utils/utils.ts @@ -1,8 +1,10 @@ -import { ElementRef } from "@angular/core"; +import { ElementRef } from '@angular/core'; import { TableWidthConfig } from '../data-table.model'; -export const simDeepClone = obj => { - if (obj === null) { return null; } +export const simDeepClone = (obj) => { + if (obj === null) { + return null; + } if (typeof obj === 'object') { return JSON.parse(JSON.stringify(obj)); } else if (typeof obj === 'string') { @@ -28,7 +30,7 @@ export function tableResizeFunc(tableWidthConfig: TableWidthConfig[], ele: Eleme if (firstResize) { firstResize = false; const ratio = beforeWidth / parseInt(tableWidthConfig[index].width, 10); - tableWidthConfig.forEach(t => { + tableWidthConfig.forEach((t) => { t.width = parseInt(t.width, 10) * ratio + 'px'; }); _totalWidth = ele.nativeElement.querySelector('.table-wrap').offsetWidth - 8; @@ -37,7 +39,7 @@ export function tableResizeFunc(tableWidthConfig: TableWidthConfig[], ele: Eleme tableWidthConfig[index].width = width + 'px'; let newWidthTotal = 0; - tableWidthConfig.forEach(t => { + tableWidthConfig.forEach((t) => { newWidthTotal += parseInt(t.width, 10); }); @@ -47,7 +49,7 @@ export function tableResizeFunc(tableWidthConfig: TableWidthConfig[], ele: Eleme if (changeValue < 0) { lastCol.width = lastColWidth + _totalWidth - newWidthTotal + 'px'; } else if (lastColWidth > lastWidth) { - const lastChange = (lastColWidth - lastWidth) > changeValue ? changeValue : (lastColWidth - lastWidth); + const lastChange = lastColWidth - lastWidth > changeValue ? changeValue : lastColWidth - lastWidth; lastCol.width = lastColWidth - lastChange + 'px'; } } @@ -60,7 +62,7 @@ export const highPerformanceFilter = (arr, func) => { // 经过调查，在小于10000或大于99999条数据的时候，for循环速度比filter速度会快7至8倍左右 if (arrLength < 10000 || arrLength > 99999) { for (let a = 0; a < arrLength; a++) { - if (func(arr[a],a)) { + if (func(arr[a], a)) { res.push(arr[a]); } } @@ -70,27 +72,26 @@ export const highPerformanceFilter = (arr, func) => { return res; }; - // 生成随机Id export const generateId = () => { let timeStamp = new Date().getTime(); - if (window.performance && typeof window.performance.now === "function") { + if (window.performance && typeof window.performance.now === 'function') { timeStamp += performance.now(); } - const id = 'aaaaaaaaaaaaaaabaaaaaaaaaaaaaaa'.replace(/[ab]/g, function (item) { + const id = 'aaaaaaaaaaaaaaabaaaaaaaaaaaaaaa'.replace(/[ab]/g, (item) => { const res = (timeStamp + Math.random() * 16) % 16 | 0; timeStamp = Math.floor(timeStamp / 16); - return (item === 'a' ? res : (res & 0x3 | 0x8)).toString(16); + return (item === 'a' ? res : (res & 0x3) | 0x8).toString(16); }); return id; }; export const highPerformanceExpandObjectInArray = (oldObj, attr) => { - oldObj[Symbol.iterator] = function() { + oldObj[Symbol.iterator] = () => { return { - next:function() { + next: function next() { const array = Reflect.ownKeys(oldObj); - if (this.index < array.length-1) { + if (this.index < array.length - 1) { const key = array[this.index]; this.index++; return { value: oldObj[key] }; @@ -98,13 +99,13 @@ export const highPerformanceExpandObjectInArray = (oldObj, attr) => { return { done: true }; } }, - index:0 + index: 0, }; }; - if(attr) { - const newObj=[]; - for(let i=0;i { return [...oldObj]; }; - // 将一些公共方法拆分出来 -export const getNodeIndex = (nodeId, treeTableArray) => { // 找到节点在总数据中的位置的方法 +export const getNodeIndex = (nodeId, treeTableArray) => { + // 找到节点在总数据中的位置的方法 return treeTableArray.findIndex((v) => v.node_id === nodeId); }; -export class FindChild { // 寻找子节点 +export class FindChild { + // 寻找子节点 allChildCol: any = []; - getChildrenOfItem(node, treeTableArray) { // 找到节点下的子节点的方法 - const data: any = highPerformanceFilter(treeTableArray, item => item.parent_node_id === node.node_id); + getChildrenOfItem(node, treeTableArray) { + // 找到节点下的子节点的方法 + const data: any = highPerformanceFilter(treeTableArray, (item) => item.parent_node_id === node.node_id); return data; } - getAllChildrenOfItem(node, treeTableArray) { // 找到节点下所有子集的方法 + getAllChildrenOfItem(node, treeTableArray) { + // 找到节点下所有子集的方法 this.allChildCol = []; this.getAllChildrenData(node, treeTableArray); return this.allChildCol; @@ -138,20 +142,21 @@ export class FindChild { // 寻找子节点 const newArray = [...childData]; newArray.push(node); this.allChildCol = [...this.allChildCol, ...newArray]; - for(let i=0; i { // 数组去重的方法 +export const distinct = (recordArr, nodeArr) => { + // 数组去重的方法 const arr = recordArr.concat(nodeArr); const result = []; const obj = {}; - for(const i of arr) { - if(!obj[i.node_id]) { + for (const i of arr) { + if (!obj[i.node_id]) { result.push(i); obj[i.node_id] = 1; } @@ -164,7 +169,7 @@ export const highPerformanceMap = (arr, func) => { const arrLength = arr.length; if (arrLength < 10000 || arrLength > 99999) { for (let a = 0; a < arrLength; a++) { - const rs=func(arr[a],a); + const rs = func(arr[a], a); if (rs) { res.push(rs); } @@ -177,16 +182,15 @@ export const highPerformanceMap = (arr, func) => { export const flatTreeData = (dataSource: any[]) => { const flatData = []; - const travelObj = (arr, parentId) => { - arr.forEach(item => { + arr.forEach((item) => { if (item.children) { const obj = { id: generateId(), node_id: generateId(), node_type: 1, parent_node_id: parentId, - ...item + ...item, }; const children = obj.children; delete obj.children; @@ -198,7 +202,7 @@ export const flatTreeData = (dataSource: any[]) => { node_id: generateId(), node_type: 0, parent_node_id: parentId, - ...item + ...item, }; flatData.push(obj); } diff --git a/devui/datepicker-pro/datepicker-pro-calendar.component.html b/devui/datepicker-pro/datepicker-pro-calendar.component.html index 2757b6f2..e8d54740 100644 --- a/devui/datepicker-pro/datepicker-pro-calendar.component.html +++ b/devui/datepicker-pro/datepicker-pro-calendar.component.html @@ -10,7 +10,7 @@ diff --git a/devui/datepicker-pro/datepicker-pro.component.html b/devui/datepicker-pro/datepicker-pro.component.html index b5f8055e..dbb4c177 100644 --- a/devui/datepicker-pro/datepicker-pro.component.html +++ b/devui/datepicker-pro/datepicker-pro.component.html @@ -63,19 +63,10 @@ class="devui-single-picker devui-input-group devui-dropdown-origin" [ngClass]="{ 'devui-disabled': disabled, - 'devui-has-value': dateValue + 'devui-has-value': dateValue, + 'devui-allow-clear': allowClear }" > - - - - - - -
+
+ + + + + +
diff --git a/devui/datepicker-pro/datepicker-pro.component.scss b/devui/datepicker-pro/datepicker-pro.component.scss index bea4daf1..915ab055 100644 --- a/devui/datepicker-pro/datepicker-pro.component.scss +++ b/devui/datepicker-pro/datepicker-pro.component.scss @@ -5,7 +5,6 @@ background-color: $devui-base-bg; .devui-single-picker { - padding-left: 8px; position: relative; box-sizing: border-box; width: 100%; @@ -19,14 +18,14 @@ } &-icon { - vertical-align: bottom; + vertical-align: text-bottom; height: 16px; } .close-icon-wrapper { padding: 0 8px; vertical-align: baseline; - visibility: hidden; + display: none; .close-icon { width: 16px; @@ -52,8 +51,23 @@ } } - &.devui-has-value:hover:not(.devui-disabled) .close-icon-wrapper { - visibility: visible; + .date-icon-wrapper { + padding: 0 8px; + display: block; + + path { + fill: $devui-icon-fill-weak; + } + } + + &.devui-has-value.devui-allow-clear:hover:not(.devui-disabled) { + .close-icon-wrapper { + display: block; + } + + .date-icon-wrapper { + display: none; + } } &:not(.devui-disabled) .close-icon-wrapper { diff --git a/devui/datepicker-pro/demo/datepicker-pro-demo.component.ts b/devui/datepicker-pro/demo/datepicker-pro-demo.component.ts index 4b9f2b28..3c7c31d4 100644 --- a/devui/datepicker-pro/demo/datepicker-pro-demo.component.ts +++ b/devui/datepicker-pro/demo/datepicker-pro-demo.component.ts @@ -68,6 +68,7 @@ export class DatepickerProDemoComponent implements OnInit, OnDestroy { ]; navItems = []; subs: Subscription = new Subscription(); + constructor(private translate: TranslateService) {} ngOnInit() { @@ -90,14 +91,14 @@ export class DatepickerProDemoComponent implements OnInit, OnDestroy { { dAnchorLink: 'basic-usage', value: values['basic-usage'] }, { dAnchorLink: 'date-marked', value: values['mark-type'] }, { dAnchorLink: 'show-time', value: values['show-time'] }, - { dAnchorLink: 'template', value: values['template'] }, - { dAnchorLink: 'monthYear', value: values['monthYear'] }, - { dAnchorLink: 'range-picker', value: values['rangePicker'] }, - { dAnchorLink: 'range-template', value: values['rangeTemplate'] }, - { dAnchorLink: 'host-template', value: values['host-template'] }, - { dAnchorLink: 'datepicker-pro-static-panel', value: values['datepicker-pro-static-panel']}, - { dAnchorLink: 'select-type', value: values['select-type'] }, - { dAnchorLink: 'datepicker-pro-tab-type', value: values['tab-typeDemo']} + { dAnchorLink: 'template', value: values.template }, + { dAnchorLink: 'monthYear', value: values.monthYear }, + { dAnchorLink: 'range-picker', value: values.rangePicker }, + { dAnchorLink: 'range-template', value: values.rangeTemplate }, + { dAnchorLink: 'host-template', value: values['host-template'] }, + { dAnchorLink: 'datepicker-pro-static-panel', value: values['datepicker-pro-static-panel'] }, + { dAnchorLink: 'select-type', value: values['select-type'] }, + { dAnchorLink: 'datepicker-pro-tab-type', value: values['tab-typeDemo'] }, ]; } diff --git a/devui/datepicker-pro/demo/tab-type/datepicker-pro-tab-type.component.html b/devui/datepicker-pro/demo/tab-type/datepicker-pro-tab-type.component.html index bd15c815..02343011 100644 --- a/devui/datepicker-pro/demo/tab-type/datepicker-pro-tab-type.component.html +++ b/devui/datepicker-pro/demo/tab-type/datepicker-pro-tab-type.component.html @@ -5,7 +5,7 @@ diff --git a/devui/datepicker-pro/lib/calendar-panel.component.ts b/devui/datepicker-pro/lib/calendar-panel.component.ts index 8bc77614..b62a75af 100644 --- a/devui/datepicker-pro/lib/calendar-panel.component.ts +++ b/devui/datepicker-pro/lib/calendar-panel.component.ts @@ -139,6 +139,8 @@ export class CalendarPanelComponent implements OnInit, OnDestroy { ).subscribe(isOpen => { if (isOpen) { setTimeout(() => { + this.scrollBodyCmp.checkViewportSize(); + this.scrollListCmp.checkViewportSize(); this.goToDate(this.curDate || new Date(), 'auto'); }); diff --git a/devui/datepicker-pro/lib/timepicker-panel.component.ts b/devui/datepicker-pro/lib/timepicker-panel.component.ts index 2ab03447..c8fc1fd8 100644 --- a/devui/datepicker-pro/lib/timepicker-panel.component.ts +++ b/devui/datepicker-pro/lib/timepicker-panel.component.ts @@ -1,8 +1,4 @@ -import { - ChangeDetectionStrategy, - ChangeDetectorRef, - Component, ElementRef, OnDestroy, OnInit -} from '@angular/core'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, OnDestroy, OnInit } from '@angular/core'; import { I18nInterface, I18nService } from 'ng-devui/i18n'; import { Subject, Subscription } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; @@ -20,10 +16,9 @@ interface TimeObj { templateUrl: './timepicker-panel.component.html', styleUrls: ['./timepicker-panel.component.scss'], preserveWhitespaces: false, - changeDetection: ChangeDetectionStrategy.OnPush + changeDetection: ChangeDetectionStrategy.OnPush, }) export class TimepickerPanelComponent implements OnInit, OnDestroy { - firstList: Array = []; secondList: Array = []; thirdList: Array = []; @@ -38,12 +33,7 @@ export class TimepickerPanelComponent implements OnInit, OnDestroy { i18nText: I18nInterface['datePickerPro']; i18nSubscription: Subscription; - constructor( - private el: ElementRef, - private pickSrv: DatepickerProService, - protected i18n: I18nService, - private cdr: ChangeDetectorRef - ) {} + constructor(private el: ElementRef, private pickSrv: DatepickerProService, protected i18n: I18nService, private cdr: ChangeDetectorRef) {} ngOnInit(): void { this.initDateList(); @@ -59,9 +49,7 @@ export class TimepickerPanelComponent implements OnInit, OnDestroy { } initObservable() { - this.pickSrv.toggleEvent.pipe( - takeUntil(this.unsubscribe$) - ).subscribe(isOpen => { + this.pickSrv.toggleEvent.pipe(takeUntil(this.unsubscribe$)).subscribe((isOpen) => { if (isOpen) { setTimeout(() => { this.initDateList(true); @@ -70,9 +58,7 @@ export class TimepickerPanelComponent implements OnInit, OnDestroy { } }); - this.pickSrv.updateTimeChange.pipe( - takeUntil(this.unsubscribe$) - ).subscribe(value => { + this.pickSrv.updateTimeChange.pipe(takeUntil(this.unsubscribe$)).subscribe((value) => { if (this.hourIndex !== value.hour) { this.chooseTime('hour', value.hour); } @@ -88,11 +74,8 @@ export class TimepickerPanelComponent implements OnInit, OnDestroy { }); if (this.pickSrv.isRange) { - this.pickSrv.activeInputChange.pipe( - takeUntil(this.unsubscribe$) - ).subscribe(type => { - const isNull = (type === 'start' && !this.pickSrv.curRangeDate[0]) || - (type === 'end' && !this.pickSrv.curRangeDate[1]); + this.pickSrv.activeInputChange.pipe(takeUntil(this.unsubscribe$)).subscribe((type) => { + const isNull = (type === 'start' && !this.pickSrv.curRangeDate[0]) || (type === 'end' && !this.pickSrv.curRangeDate[1]); if (this.hourIndex !== this.pickSrv.curHour || isNull) { this.chooseTime('hour', isNull ? null : this.pickSrv.curHour); } @@ -104,13 +87,10 @@ export class TimepickerPanelComponent implements OnInit, OnDestroy { if (this.secIndex !== this.pickSrv.curSec || isNull) { this.chooseTime('sec', isNull ? null : this.pickSrv.curSec); } - }); } - this.pickSrv.selectedDateChange.pipe( - takeUntil(this.unsubscribe$) - ).subscribe(() => { + this.pickSrv.selectedDateChange.pipe(takeUntil(this.unsubscribe$)).subscribe(() => { const isFixTime = this.fixTime(); this.cdr.detectChanges(); @@ -121,7 +101,7 @@ export class TimepickerPanelComponent implements OnInit, OnDestroy { activeInput: this.pickSrv.currentActiveInput, hour: this.hourIndex, min: this.minIndex, - seconds: this.secIndex + seconds: this.secIndex, }); }); } @@ -134,7 +114,7 @@ export class TimepickerPanelComponent implements OnInit, OnDestroy { this.minIndex = this.pickSrv.curDate.getMinutes(); this.secIndex = this.pickSrv.curDate.getSeconds(); } - this.typeList.forEach(type => { + this.typeList.forEach((type) => { this.chooseTime(type, this[`${type}Index`], false, justScroll); }); } @@ -142,7 +122,7 @@ export class TimepickerPanelComponent implements OnInit, OnDestroy { chooseTime(type: string, index: number, handle = false, justScroll = false) { if (this.itemIsDisabled(type, index)) { return; - }; + } let fixed: boolean; switch (type) { case 'hour': @@ -155,9 +135,9 @@ export class TimepickerPanelComponent implements OnInit, OnDestroy { active: this.hourIndex === i, }; }); - if(!fixed) { + if (!fixed) { this.setScroll('first', this.hourIndex, justScroll); - }; + } break; case 'min': this.minIndex = index; @@ -169,9 +149,9 @@ export class TimepickerPanelComponent implements OnInit, OnDestroy { active: this.minIndex === i, }; }); - if(!fixed) { + if (!fixed) { this.setScroll('second', this.minIndex, justScroll); - }; + } break; case 'sec': this.secIndex = index; @@ -183,6 +163,8 @@ export class TimepickerPanelComponent implements OnInit, OnDestroy { }; }); this.setScroll('third', this.secIndex, justScroll); + break; + default: } this.cdr.detectChanges(); @@ -192,7 +174,7 @@ export class TimepickerPanelComponent implements OnInit, OnDestroy { activeInput: this.pickSrv.currentActiveInput, hour: this.hourIndex, min: this.minIndex, - seconds: this.secIndex + seconds: this.secIndex, }); } } @@ -228,7 +210,7 @@ export class TimepickerPanelComponent implements OnInit, OnDestroy { isFixTime = true; } - if(isFixTime) { + if (isFixTime) { this.initDateList(justScroll); } @@ -277,6 +259,7 @@ export class TimepickerPanelComponent implements OnInit, OnDestroy { curTime.setMinutes(this.minIndex); time = curTime.setSeconds(index); break; + default: } flag = time > maxTime || time < minTime; @@ -307,10 +290,11 @@ export class TimepickerPanelComponent implements OnInit, OnDestroy { } const difference = to - element.scrollTop; const perTick = (difference / duration) * 10; - const reqAnimFrame = window['requestAnimationFrame'] || - window['mozRequestAnimationFrame'] || - window['msRequestAnimationFrame'] || - window['oRequestAnimationFrame']; + const reqAnimFrame = + (window as any).requestAnimationFrame || + (window as any).mozRequestAnimationFrame || + (window as any).msRequestAnimationFrame || + (window as any).oRequestAnimationFrame; reqAnimFrame(() => { element.scrollTop = element.scrollTop + perTick; if (element.scrollTop === to) { @@ -324,5 +308,4 @@ export class TimepickerPanelComponent implements OnInit, OnDestroy { this.unsubscribe$.next(); this.unsubscribe$.complete(); } - } diff --git a/devui/datepicker-pro/lib/year-panel.component.ts b/devui/datepicker-pro/lib/year-panel.component.ts index fb04bb80..aa318252 100644 --- a/devui/datepicker-pro/lib/year-panel.component.ts +++ b/devui/datepicker-pro/lib/year-panel.component.ts @@ -1,15 +1,5 @@ import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling'; -import { - ChangeDetectionStrategy, - - ChangeDetectorRef, - - Component, - Input, - OnDestroy, - OnInit, - ViewChild -} from '@angular/core'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, OnInit, ViewChild } from '@angular/core'; import { chunk } from 'lodash-es'; import { Subject } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; @@ -20,7 +10,7 @@ import { DatepickerProService } from '../datepicker-pro.service'; templateUrl: './year-panel.component.html', styleUrls: ['./year-panel.component.scss'], preserveWhitespaces: false, - changeDetection: ChangeDetectionStrategy.OnPush + changeDetection: ChangeDetectionStrategy.OnPush, }) export class YearPanelComponent implements OnInit, OnDestroy { @ViewChild('scrollList') scrollListCmp: CdkVirtualScrollViewport; @@ -62,11 +52,7 @@ export class YearPanelComponent implements OnInit, OnDestroy { } } - constructor( - private cdr: ChangeDetectorRef, - private pickerSrv: DatepickerProService - ) { - } + constructor(private cdr: ChangeDetectorRef, private pickerSrv: DatepickerProService) {} ngOnInit() { this.initYearList(); @@ -74,7 +60,7 @@ export class YearPanelComponent implements OnInit, OnDestroy { } initObservable() { - this.pickerSrv.toggleEvent.subscribe(isOpen => { + this.pickerSrv.toggleEvent.subscribe((isOpen) => { if (isOpen) { setTimeout(() => { this.goToYear(this.currentDate || new Date()); @@ -82,9 +68,7 @@ export class YearPanelComponent implements OnInit, OnDestroy { } }); - this.pickerSrv.updateDateValue.pipe( - takeUntil(this.unsubscribe$), - ).subscribe(res => { + this.pickerSrv.updateDateValue.pipe(takeUntil(this.unsubscribe$)).subscribe((res) => { if (res.type === 'range') { this.pickerSrv.curRangeDate = res.value as Date[]; } else { @@ -93,9 +77,7 @@ export class YearPanelComponent implements OnInit, OnDestroy { this.goToYear(this.currentDate || new Date()); }); - this.pickerSrv.activeInputChange.pipe( - takeUntil(this.unsubscribe$) - ).subscribe(type => { + this.pickerSrv.activeInputChange.pipe(takeUntil(this.unsubscribe$)).subscribe((type) => { if (type === 'start') { this.goToYear(this.pickerSrv.curRangeDate[0] || this.pickerSrv.curRangeDate[1] || new Date()); } else { @@ -144,7 +126,7 @@ export class YearPanelComponent implements OnInit, OnDestroy { } isDateAbandon(yearIndex: number) { - if (!this.isRangeType || (!this.pickerSrv.curRangeDate[0] || !this.pickerSrv.curRangeDate[1])) { + if (!this.isRangeType || !this.pickerSrv.curRangeDate[0] || !this.pickerSrv.curRangeDate[1]) { return false; } const date = new Date(yearIndex, 0, 1); @@ -180,7 +162,7 @@ export class YearPanelComponent implements OnInit, OnDestroy { if (this.isDisable(yearIndex)) { return; } - this.currentDate = new Date(yearIndex, 0 , 1); + this.currentDate = new Date(yearIndex, 0, 1); if (this.isRangeType) { this.pickerSrv.fixRangeDate(); @@ -199,7 +181,7 @@ export class YearPanelComponent implements OnInit, OnDestroy { this.pickerSrv.selectedDateChange.next({ type: this.isRangeType ? 'range' : 'single', - value: this.isRangeType ? this.pickerSrv.curRangeDate : this.currentDate + value: this.isRangeType ? this.pickerSrv.curRangeDate : this.currentDate, }); if (this.pickerSrv.closeAfterSelected) { @@ -209,7 +191,7 @@ export class YearPanelComponent implements OnInit, OnDestroy { isDisable(yearIndex: number) { const date = new Date(yearIndex, 0, 1); - return this.pickerSrv.maxDate.getTime() < date.getTime() || this.pickerSrv.minDate.getTime() > date.getTime(); + return this.pickerSrv.maxDate.getTime() < date.getTime() || this.pickerSrv.minDate.getTime() > date.getTime(); } setHoverTarget(yearIndex: number) { diff --git a/devui/datepicker-pro/range-datepicker-pro.component.html b/devui/datepicker-pro/range-datepicker-pro.component.html index 16826cdf..032208e3 100644 --- a/devui/datepicker-pro/range-datepicker-pro.component.html +++ b/devui/datepicker-pro/range-datepicker-pro.component.html @@ -61,19 +61,10 @@ class="devui-range-picker devui-input-group devui-dropdown-origin" [ngClass]="{ 'devui-disabled': disabled, - 'devui-has-value': dateValue[0] || dateValue[1] + 'devui-has-value': dateValue[0] || dateValue[1], + 'devui-allow-clear': allowClear }" > - - - - - - - - {{ splitter }} + {{ splitter }}
+
+ + + + + +
diff --git a/devui/datepicker-pro/range-datepicker-pro.component.scss b/devui/datepicker-pro/range-datepicker-pro.component.scss index 93482108..16b16f2c 100644 --- a/devui/datepicker-pro/range-datepicker-pro.component.scss +++ b/devui/datepicker-pro/range-datepicker-pro.component.scss @@ -5,7 +5,7 @@ background-color: $devui-base-bg; .devui-range-picker { - padding: 0 8px; + padding-right: 8px; position: relative; box-sizing: border-box; width: 100%; @@ -15,7 +15,7 @@ .devui-input { padding: 4px 8px; - width: calc(50% - 18px); + width: calc(50% - 14px); &.devui-active-input { color: $devui-brand; @@ -26,27 +26,27 @@ display: block; max-width: calc(50% - 48px); height: 1px; - background-color: $devui-brand-foil; + background-color: $devui-brand; position: absolute; bottom: 0; &.devui-start-side { - left: 35px; + left: 9px; } &.devui-end-side { - left: calc(50% + 12px); + left: calc(50% + 4px); } } &-icon { - vertical-align: bottom; + vertical-align: text-bottom; height: 16px; } .close-icon-wrapper { padding: 0 8px; - visibility: hidden; + display: none; position: absolute; right: 0; top: 0; @@ -76,8 +76,27 @@ } } - &.devui-has-value:hover .close-icon-wrapper { - visibility: visible; + .date-icon-wrapper { + padding: 0 8px; + display: block; + position: absolute; + right: 0; + top: 0; + line-height: 25px; + + path { + fill: $devui-icon-fill-weak; + } + } + + &.devui-has-value.devui-allow-clear:hover { + .close-icon-wrapper { + display: block; + } + + .date-icon-wrapper { + display: none; + } } &:not(.devui-disabled) .close-icon-wrapper { @@ -87,7 +106,6 @@ .devui-input-group > .devui-input { display: inline-block; - text-align: center; &::-ms-clear { display: none; diff --git a/devui/datepicker-pro/range-datepicker-pro.component.ts b/devui/datepicker-pro/range-datepicker-pro.component.ts index ffabdfa5..1fbd96ef 100644 --- a/devui/datepicker-pro/range-datepicker-pro.component.ts +++ b/devui/datepicker-pro/range-datepicker-pro.component.ts @@ -12,7 +12,7 @@ import { OnInit, Output, TemplateRef, - ViewChild + ViewChild, } from '@angular/core'; import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; import { EN_US, I18nFormat, I18nInterface, I18nService } from 'ng-devui/i18n'; @@ -31,8 +31,8 @@ import { DateConfig } from './lib/datepicker-pro.type'; { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => RangeDatepickerProComponent), - multi: true - } + multi: true, + }, ], preserveWhitespaces: false, }) @@ -50,7 +50,7 @@ export class RangeDatepickerProComponent implements OnInit, OnDestroy, AfterView @Input() appendToBody = true; @Input() placeholder: string[]; @Input() allowClear = true; - @Input() set calenderRange (value) { + @Input() set calenderRange(value) { this.pickerSrv.calendarRange = value || [1970, 2099]; } @Input() set minDate(value: Date) { @@ -69,14 +69,14 @@ export class RangeDatepickerProComponent implements OnInit, OnDestroy, AfterView } @Input() set markedRangeDateList(value: Date[][]) { this.pickerSrv.markedRangeDateList = value; - }; + } @Input() set markedDateList(value: Date[]) { this.pickerSrv.markedDateList = value; } @Input() @WithConfig() showGlowStyle = true; - @HostBinding('class.devui-glow-style') get hasGlowStyle () { + @HostBinding('class.devui-glow-style') get hasGlowStyle() { return this.showGlowStyle; - }; + } @Output() dropdownToggle = new EventEmitter(); @Output() confirmEvent = new EventEmitter(); @ContentChild('customTemplate') customTemplate: TemplateRef; @@ -84,7 +84,7 @@ export class RangeDatepickerProComponent implements OnInit, OnDestroy, AfterView @ContentChild('hostTemplate') hostTemplate: TemplateRef; @ContentChild('markDateInfoTemplate') set markDateInfoTemplate(tmp: TemplateRef) { this.pickerSrv.markDateInfoTemplate = tmp; - }; + } @ViewChild('dateInputStart') datepickerInputStart: ElementRef; @ViewChild('dateInputEnd') datepickerInputEnd: ElementRef; @@ -179,17 +179,13 @@ export class RangeDatepickerProComponent implements OnInit, OnDestroy, AfterView } private initObservable() { - this.pickerSrv.selectedDateChange.pipe( - takeUntil(this.unsubscribe$) - ).subscribe(change => { + this.pickerSrv.selectedDateChange.pipe(takeUntil(this.unsubscribe$)).subscribe((change) => { this.pickerSrv.curRangeDate = change.value as Date[]; - this.dateValue = (change.value as Date[]).map(d => this.formatDateToString(d)); + this.dateValue = (change.value as Date[]).map((d) => this.formatDateToString(d)); this.onChange(change.value); }); - this.pickerSrv.closeDropdownEvent.pipe( - takeUntil(this.unsubscribe$) - ).subscribe(isConfirm => { + this.pickerSrv.closeDropdownEvent.pipe(takeUntil(this.unsubscribe$)).subscribe((isConfirm) => { this.isOpen = false; this.dropdownToggle.emit(false); if (isConfirm) { @@ -197,50 +193,54 @@ export class RangeDatepickerProComponent implements OnInit, OnDestroy, AfterView if (this.dateValue.length !== this.pickerSrv.curRangeDate.length) { this.onChange(this.pickerSrv.curRangeDate); } - this.dateValue = this.pickerSrv.curRangeDate.map(d => this.formatDateToString(d)); + this.dateValue = this.pickerSrv.curRangeDate.map((d) => this.formatDateToString(d)); } }); - this.pickerSrv.activeInputChange.pipe( - takeUntil(this.unsubscribe$) - ).subscribe(() => { + this.pickerSrv.activeInputChange.pipe(takeUntil(this.unsubscribe$)).subscribe(() => { this.getStrWidth(); }); if (!this.hostTemplate) { - fromEvent(this.datepickerInputStart.nativeElement, 'input').pipe( - takeUntil(this.unsubscribe$), - map(t => { - this.getStrWidth(); - return 'start'; - }), - debounceTime(300) - ).subscribe(this.inputChangeCallback); - - fromEvent(this.datepickerInputEnd.nativeElement, 'input').pipe( - takeUntil(this.unsubscribe$), - map(t => { - this.getStrWidth(); - return 'end'; - }), - debounceTime(300) - ).subscribe(this.inputChangeCallback); - - fromEvent(this.datepickerInputStart.nativeElement, 'blur').pipe( - takeUntil(this.unsubscribe$), - map(t => 'start'), - ).subscribe(this.inputBlurCallback); - - fromEvent(this.datepickerInputEnd.nativeElement, 'blur').pipe( - takeUntil(this.unsubscribe$), - map(t => 'end'), - ).subscribe(this.inputBlurCallback); + fromEvent(this.datepickerInputStart.nativeElement, 'input') + .pipe( + takeUntil(this.unsubscribe$), + map((t) => { + this.getStrWidth(); + return 'start'; + }), + debounceTime(300) + ) + .subscribe(this.inputChangeCallback); + + fromEvent(this.datepickerInputEnd.nativeElement, 'input') + .pipe( + takeUntil(this.unsubscribe$), + map((t) => { + this.getStrWidth(); + return 'end'; + }), + debounceTime(300) + ) + .subscribe(this.inputChangeCallback); + + fromEvent(this.datepickerInputStart.nativeElement, 'blur') + .pipe( + takeUntil(this.unsubscribe$), + map((t) => 'start') + ) + .subscribe(this.inputBlurCallback); + + fromEvent(this.datepickerInputEnd.nativeElement, 'blur') + .pipe( + takeUntil(this.unsubscribe$), + map((t) => 'end') + ) + .subscribe(this.inputBlurCallback); } if (this.showTime) { - this.pickerSrv.selectedTimeChange.pipe( - takeUntil(this.unsubscribe$) - ).subscribe(change => { + this.pickerSrv.selectedTimeChange.pipe(takeUntil(this.unsubscribe$)).subscribe((change) => { const curTime = new Date(this.curActiveDate.getTime()).setHours(change.hour, change.min, change.seconds); const curDate = new Date(curTime); if (change.activeInput === 'start') { @@ -322,7 +322,7 @@ export class RangeDatepickerProComponent implements OnInit, OnDestroy, AfterView this.pickerSrv.updateDateValue.next({ type: 'range', - value: this.pickerSrv.curRangeDate + value: this.pickerSrv.curRangeDate, }); this.onChange(this.pickerSrv.curRangeDate); @@ -331,11 +331,10 @@ export class RangeDatepickerProComponent implements OnInit, OnDestroy, AfterView activeInput: type, hour: inputDate.getHours(), min: inputDate.getMinutes(), - seconds: inputDate.getSeconds() + seconds: inputDate.getSeconds(), }); } } - }; inputBlurCallback = (type) => { @@ -379,12 +378,9 @@ export class RangeDatepickerProComponent implements OnInit, OnDestroy, AfterView validateDate(value: string) { const valueDate = this.datepickerConvert.parse(value, this.curFormat); - const valueFormat = valueDate && !isNaN(valueDate.getTime()) && - this.datepickerConvert.format(valueDate, this.curFormat, this.locale || this.i18nLocale); - if ( - !valueDate || value !== valueFormat || - (value === valueFormat && !this.pickerSrv.dateInRange(valueDate)) - ) { + const valueFormat = + valueDate && !isNaN(valueDate.getTime()) && this.datepickerConvert.format(valueDate, this.curFormat, this.locale || this.i18nLocale); + if (!valueDate || value !== valueFormat || (value === valueFormat && !this.pickerSrv.dateInRange(valueDate))) { return false; } else { return true; @@ -420,13 +416,13 @@ export class RangeDatepickerProComponent implements OnInit, OnDestroy, AfterView } this.pickerSrv.updateDateValue.next({ type: 'range', - value: [] + value: [], }); this.pickerSrv.updateTimeChange.next({ hour: null, min: null, - seconds: null + seconds: null, }); this.dateValue = []; this.pickerSrv.curRangeDate = []; @@ -442,13 +438,13 @@ export class RangeDatepickerProComponent implements OnInit, OnDestroy, AfterView return; } - this.dateValue = value.map(d => { + this.dateValue = value.map((d) => { return d ? this.datepickerConvert.format(d, this.curFormat) : ''; }); this.pickerSrv.curRangeDate = value; this.pickerSrv.updateDateValue.next({ type: 'range', - value + value, }); } diff --git a/devui/datepicker/date-change-event-args.model.ts b/devui/datepicker/date-change-event-args.model.ts index 67926bfc..a402be2f 100755 --- a/devui/datepicker/date-change-event-args.model.ts +++ b/devui/datepicker/date-change-event-args.model.ts @@ -1,9 +1,9 @@ export enum SelectDateChangeReason { - date, - time, - button, - format, - custom + date = 0, + time = 1, + button = 2, + format = 3, + custom = 4, } export interface SelectDateChangeEventArgs { diff --git a/devui/datepicker/date-range-change-event-args.model.ts b/devui/datepicker/date-range-change-event-args.model.ts index 37d3424e..5a346ca5 100644 --- a/devui/datepicker/date-range-change-event-args.model.ts +++ b/devui/datepicker/date-range-change-event-args.model.ts @@ -1,9 +1,9 @@ export enum SelectDateRangeChangeReason { - date, - time, - button, - format, - custom + date = 0, + time = 1, + button = 2, + format = 3, + custom = 4, } export interface SelectDateRangeChangeEventArgs { diff --git a/devui/datepicker/date-range-picker.component.ts b/devui/datepicker/date-range-picker.component.ts index 9d1a755f..fd534dea 100644 --- a/devui/datepicker/date-range-picker.component.ts +++ b/devui/datepicker/date-range-picker.component.ts @@ -10,7 +10,7 @@ import { Output, SimpleChanges, TemplateRef, - ViewChild + ViewChild, } from '@angular/core'; import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; import { I18nInterface, I18nService } from 'ng-devui/i18n'; @@ -22,11 +22,13 @@ import { SelectDateRangeChangeEventArgs, SelectDateRangeChangeReason } from './d @Component({ selector: 'd-date-range-picker', - providers: [{ - provide: NG_VALUE_ACCESSOR, - useExisting: forwardRef(() => DateRangePickerComponent), - multi: true - }], + providers: [ + { + provide: NG_VALUE_ACCESSOR, + useExisting: forwardRef(() => DateRangePickerComponent), + multi: true, + }, + ], exportAs: 'dateRangePicker', templateUrl: './date-range-picker.component.html', styleUrls: ['./date-range-picker.component.scss'], @@ -102,21 +104,23 @@ export class DateRangePickerComponent implements OnChanges, OnInit, ControlValue } constructor(private datePickerConfig: DatePickerConfig, private i18n: I18nService) { - this._dateConfig = datePickerConfig['dateConfig']; - this.dateConverter = datePickerConfig['dateConfig'].dateConverter || new DefaultDateConverter(); + this._dateConfig = datePickerConfig.dateConfig; + this.dateConverter = datePickerConfig.dateConfig.dateConverter || new DefaultDateConverter(); this.setI18nText(); } checkDateConfig(dateConfig: any) { - if (!dateConfig) { return false; } - if (typeof(dateConfig.timePicker) !== 'boolean' || !dateConfig.max || !dateConfig.min || !dateConfig.format) { + if (!dateConfig) { + return false; + } + if (typeof dateConfig.timePicker !== 'boolean' || !dateConfig.max || !dateConfig.min || !dateConfig.format) { return false; } return true; } ngOnChanges(changes: SimpleChanges) { - if (changes && changes['selectedRange'] && changes['selectedRange'].currentValue) { + if (changes?.selectedRange?.currentValue) { this.writeValue(this.selectedRange); } } @@ -139,10 +143,10 @@ export class DateRangePickerComponent implements OnChanges, OnInit, ControlValue if (selectedRange) { this.selectedRange = selectedRange; if (this.leftPicker) { - this.leftPicker['selectedRange'] = selectedRange; + (this.leftPicker as any).selectedRange = selectedRange; } if (this.rightPicker) { - this.rightPicker['selectedRange'] = selectedRange; + (this.rightPicker as any).selectedRange = selectedRange; } [this.rangeStart, this.rangeEnd] = this.selectedRange; } @@ -172,16 +176,14 @@ export class DateRangePickerComponent implements OnChanges, OnInit, ControlValue } subscribeHoverActions() { - this.hoverOnDate.pipe( - distinctUntilChanged() - ).subscribe((date) => { + this.hoverOnDate.pipe(distinctUntilChanged()).subscribe((date) => { this.previewRangeEnd(date); }); } previewRangeEnd(date) { - this.leftPicker['previewEnd'] = date; - this.rightPicker['previewEnd'] = date; + (this.leftPicker as any).previewEnd = date; + (this.rightPicker as any).previewEnd = date; } syncRangeStart(rangeStart, picker: any) { @@ -196,6 +198,7 @@ export class DateRangePickerComponent implements OnChanges, OnInit, ControlValue case 'right': this.currentCalendars[1] = currentCalender; break; + default: } } @@ -204,19 +207,31 @@ export class DateRangePickerComponent implements OnChanges, OnInit, ControlValue this.onTouched(); this.selectedRangeChange.emit({ reason, - selectedRange: range + selectedRange: range, }); } consolidateTime() { const rangeStart = this.rangeStart; const rangeEnd = this.rangeEnd; - const rangeStartTime = this.leftPicker['currentTime']; - const rangeEndTime = this.rightPicker['currentTime']; - this.rangeStart = new Date(rangeStart.getFullYear(), rangeStart.getMonth(), rangeStart.getDate(), - rangeStartTime.hour, rangeStartTime.minute, rangeStartTime.second); - this.rangeEnd = new Date(rangeEnd.getFullYear(), rangeEnd.getMonth(), rangeEnd.getDate(), - rangeEndTime.hour, rangeEndTime.minute, rangeEndTime.second); + const rangeStartTime = (this.leftPicker as any).currentTime; + const rangeEndTime = (this.rightPicker as any).currentTime; + this.rangeStart = new Date( + rangeStart.getFullYear(), + rangeStart.getMonth(), + rangeStart.getDate(), + rangeStartTime.hour, + rangeStartTime.minute, + rangeStartTime.second + ); + this.rangeEnd = new Date( + rangeEnd.getFullYear(), + rangeEnd.getMonth(), + rangeEnd.getDate(), + rangeEndTime.hour, + rangeEndTime.minute, + rangeEndTime.second + ); const newRange = [this.rangeStart, this.rangeEnd]; this.onTouched(); this.writeValue(newRange); @@ -234,5 +249,4 @@ export class DateRangePickerComponent implements OnChanges, OnInit, ControlValue const currentReason = typeof reason === 'number' ? reason : SelectDateRangeChangeReason.custom; this.chooseDate([null, null], currentReason); }; - } diff --git a/devui/datepicker/date-range-picker.directive.ts b/devui/datepicker/date-range-picker.directive.ts index dfe89bab..daeaba29 100644 --- a/devui/datepicker/date-range-picker.directive.ts +++ b/devui/datepicker/date-range-picker.directive.ts @@ -6,7 +6,6 @@ import { ComponentRef, ElementRef, EventEmitter, - forwardRef, HostListener, Inject, Input, @@ -15,18 +14,22 @@ import { Output, Renderer2, TemplateRef, - ViewChild + ViewChild, + forwardRef, } from '@angular/core'; import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; import { I18nInterface, I18nService } from 'ng-devui/i18n'; import { - addClassToOrigin, DateConverter, - DefaultDateConverter, DevConfigService, fadeInOut, + DefaultDateConverter, + DevConfigService, + WithConfig, + addClassToOrigin, + fadeInOut, formWithDropDown, - removeClassFromOrigin, WithConfig + removeClassFromOrigin, } from 'ng-devui/utils'; -import { fromEvent, Subscription } from 'rxjs'; +import { Subscription, fromEvent } from 'rxjs'; import { debounceTime, filter, map } from 'rxjs/operators'; import { DatePickerConfigService as DatePickerConfig } from './date-picker.config.service'; import { SelectDateRangeChangeEventArgs, SelectDateRangeChangeReason } from './date-range-change-event-args.model'; @@ -35,17 +38,17 @@ import { DateRangePickerComponent } from './date-range-picker.component'; @Component({ /* eslint-disable-next-line @angular-eslint/component-selector*/ selector: '[dDateRangePicker]', - providers: [{ + providers: [ + { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DateRangePickerDirective), - multi: true - }], + multi: true, + }, + ], exportAs: 'dateRangePicker', templateUrl: './date-range-picker.directive.html', styleUrls: ['./date-range-picker.component.scss'], - animations: [ - fadeInOut - ], + animations: [fadeInOut], preserveWhitespaces: false, }) // tslint:disable-next-line: component-class-suffix @@ -83,8 +86,8 @@ export class DateRangePickerDirective implements OnInit, ControlValueAccessor, O } get maxDate() { - if (this.dateRangePicker && this.dateRangePicker['maxDate']) { - return this.dateRangePicker['maxDate']; + if ((this.dateRangePicker as any)?.maxDate) { + return (this.dateRangePicker as any).maxDate; } else { return this._maxDate; } @@ -95,15 +98,15 @@ export class DateRangePickerDirective implements OnInit, ControlValueAccessor, O } get minDate() { - if (this.dateRangePicker && this.dateRangePicker['minDate']) { - return this.dateRangePicker['minDate']; + if ((this.dateRangePicker as any)?.minDate) { + return (this.dateRangePicker as any).minDate; } else { return this._minDate; } } @Input() set selectedRange(range: Array) { - if (Array.isArray(range) && range.every(_ => (!!_ || _ === null))) { + if (Array.isArray(range) && range.every((_) => !!_ || _ === null)) { this._selectedRange = range; } } @@ -145,13 +148,13 @@ export class DateRangePickerDirective implements OnInit, ControlValueAccessor, O set rangeStart(rangeStart: Date) { if (this.dateRangePicker) { - this.dateRangePicker['rangeStart'] = rangeStart; + (this.dateRangePicker as any).rangeStart = rangeStart; } } get rangeEnd() { if (this.dateRangePicker) { - return this.dateRangePicker['rangeEnd']; + return (this.dateRangePicker as any).rangeEnd; } } @@ -188,8 +191,8 @@ export class DateRangePickerDirective implements OnInit, ControlValueAccessor, O private devConfigService: DevConfigService, @Inject(DOCUMENT) private doc: any ) { - this._dateConfig = datePickerConfig['dateConfig']; - this.dateConverter = datePickerConfig['dateConfig'].dateConverter || new DefaultDateConverter(); + this._dateConfig = datePickerConfig.dateConfig; + this.dateConverter = datePickerConfig.dateConfig.dateConverter || new DefaultDateConverter(); this._minDate = this.minDate ? new Date(this.minDate) : new Date(this.dateConfig.min, 0, 1, 0, 0, 0); this._maxDate = this.maxDate ? new Date(this.maxDate) : new Date(this.dateConfig.max, 11, 31, 23, 59, 59); this.setI18nText(); @@ -205,8 +208,10 @@ export class DateRangePickerDirective implements OnInit, ControlValueAccessor, O } checkDateConfig(dateConfig: any) { - if (!dateConfig) { return false; } - if (typeof(dateConfig.timePicker) !== 'boolean' || !dateConfig.max || !dateConfig.min || !dateConfig.format) { + if (!dateConfig) { + return false; + } + if (typeof dateConfig.timePicker !== 'boolean' || !dateConfig.max || !dateConfig.min || !dateConfig.format) { return false; } return true; @@ -226,11 +231,13 @@ export class DateRangePickerDirective implements OnInit, ControlValueAccessor, O } initInputChanges(): void { - this.valueChangeSubscrip = fromEvent(this.elementRef.nativeElement, 'keyup').pipe( + this.valueChangeSubscrip = fromEvent(this.elementRef.nativeElement, 'keyup') + .pipe( map((e: any) => e.target.value), filter(() => !this.disabled), debounceTime(300) - ).subscribe(value => { + ) + .subscribe((value) => { this.transUserInputToDatepicker(value); }); } @@ -250,23 +257,23 @@ export class DateRangePickerDirective implements OnInit, ControlValueAccessor, O } chooseDate = (range, reason?, hide = true) => { - if (this.dateRangePicker && this.dateRangePicker['chooseDate']) { - this.dateRangePicker['chooseDate'](range, reason); + if ((this.dateRangePicker as any)?.chooseDate) { + (this.dateRangePicker as any).chooseDate(range, reason); } else { this._selectedRange = [...range]; this.notifyValueChange({ reason: reason, - selectedRange: [...range] + selectedRange: [...range], }); } - if (!this.showTime && this.hideOnRangeSelected && hide) { this.hide(); } + if (!this.showTime && this.hideOnRangeSelected && hide) { + this.hide(); + } }; updateCdkConnectedOverlayOrigin() { if (this.elementRef.nativeElement) { - this.cdkConnectedOverlayOrigin = new CdkOverlayOrigin( - formWithDropDown(this.elementRef) || this.elementRef.nativeElement - ); + this.cdkConnectedOverlayOrigin = new CdkOverlayOrigin(formWithDropDown(this.elementRef) || this.elementRef.nativeElement); } } @@ -285,7 +292,7 @@ export class DateRangePickerDirective implements OnInit, ControlValueAccessor, O } private writeModelValue(input) { - if (Array.isArray(input) && input.every(_ => !!_)) { + if (Array.isArray(input) && input.every((_) => !!_)) { this.renderer.setProperty(this.elementRef.nativeElement, 'value', this.formatDateRange(input)); } else { this.renderer.setProperty(this.elementRef.nativeElement, 'value', ''); @@ -293,17 +300,17 @@ export class DateRangePickerDirective implements OnInit, ControlValueAccessor, O } private formatDateRange(arr) { - return arr.map((date, i) => { - return (date ? - this.dateConverter.format(date, this.dateFormat, this.locale || this.i18nLocale) : - ['Start', 'End'][i]); - }).join(this.splitter); + return arr + .map((date, i) => { + return date ? this.dateConverter.format(date, this.dateFormat, this.locale || this.i18nLocale) : ['Start', 'End'][i]; + }) + .join(this.splitter); } onDocumentClick = ($event) => { let templateWrap; - if (this.dateRangePicker && this.dateRangePicker['templateWrap']) { - templateWrap = this.dateRangePicker['templateWrap']; + if ((this.dateRangePicker as any)?.templateWrap) { + templateWrap = (this.dateRangePicker as any).templateWrap; } if (templateWrap && templateWrap.nativeElement.contains($event.target) && !this.hideOnRangeSelected) { this.isOpen = true; @@ -321,6 +328,8 @@ export class DateRangePickerDirective implements OnInit, ControlValueAccessor, O break; case 'bottom': this.datepickerPosition = 'top'; + break; + default: } } @@ -330,15 +339,17 @@ export class DateRangePickerDirective implements OnInit, ControlValueAccessor, O this.onTouched(); this.selectedRangeChange.emit({ reason: dateObj.reason, - selectedRange: dateObj.selectedRange + selectedRange: dateObj.selectedRange, }); - if (!this.showTime && this.hideOnRangeSelected) { this.hide(); } + if (!this.showTime && this.hideOnRangeSelected) { + this.hide(); + } } private transUserInputToDatepicker(value?: string) { if (!this.showTime && !this.disabled) { const _value: string = value || this.elementRef.nativeElement.value; - if (!_value && !this.selectedRange.every(val => !!val)) { + if (!_value && !this.selectedRange.every((val) => !!val)) { this.clearAll(undefined, false); return; } @@ -365,7 +376,7 @@ export class DateRangePickerDirective implements OnInit, ControlValueAccessor, O this.valueList = value.split(this.splitter); let valueFormat; // 如果拆出来6个，则为日期间分隔符和年月日间分隔符相同的情况，此情况允许 - if (this.valueList.length === 6 && this.valueList.every(val => !!val)) { + if (this.valueList.length === 6 && this.valueList.every((val) => !!val)) { const curValueList = []; this.valueList.forEach((val, index) => { // 根据下标，前三个组装在一起，后三个组装在一起，不需要考虑分隔符，后面会format @@ -380,29 +391,32 @@ export class DateRangePickerDirective implements OnInit, ControlValueAccessor, O // 不管拆出来是6还是2个，都需要组装成2个日期 if ( this.valueList.length === 2 && - this.valueList.every(val => !!val) && + this.valueList.every((val) => !!val) && this.valueList.every((val, index) => new Date(val).getTime() === new Date(this.selectedRange[index]).getTime()) ) { - this.valueList = this.valueList.map(t => new Date(t)); + this.valueList = this.valueList.map((t) => new Date(t)); return true; } - if (!this.valueList.every(val => new Date(val).getTime())) { + if (!this.valueList.every((val) => new Date(val).getTime())) { return false; } - if (this.valueList.length === 2 && this.valueList.every(val => !!val)) { - const valueTimeList = this.valueList.map(val => (new Date(`${val} 00:00:00`)).getTime()); - valueFormat = this.formatDateRange(this.valueList.map(numValue => new Date(numValue))); + if (this.valueList.length === 2 && this.valueList.every((val) => !!val)) { + const valueTimeList = this.valueList.map((val) => new Date(`${val} 00:00:00`).getTime()); + valueFormat = this.formatDateRange(this.valueList.map((numValue) => new Date(numValue))); if ( value === valueFormat && !valueTimeList.every((val) => { - return (val >= this.minDate.getTime() && val <= this.maxDate.getTime()); + return val >= this.minDate.getTime() && val <= this.maxDate.getTime(); }) ) { return false; } else { // 判断前后俩日期是否大于最小，小于最大，若是则合法，进行如下操作 // 此时包括value为NaN既日期格式不正确的情况，对其进行处理下方判断会过滤掉 - this.valueList = this.valueList.map(val => new Date(val).getTime()).sort((a, b) => a - b).map(numValue => new Date(numValue)); + this.valueList = this.valueList + .map((val) => new Date(val).getTime()) + .sort((a, b) => a - b) + .map((numValue) => new Date(numValue)); } if (valueFormat && value === valueFormat) { return true; diff --git a/devui/datepicker/dateRangePicker.spec.ts b/devui/datepicker/dateRangePicker.spec.ts index b27e7c6d..eb4be782 100644 --- a/devui/datepicker/dateRangePicker.spec.ts +++ b/devui/datepicker/dateRangePicker.spec.ts @@ -1,5 +1,5 @@ import { Component, DebugElement, ElementRef, TemplateRef, ViewChild } from '@angular/core'; -import { ComponentFixture, fakeAsync, flush, TestBed, tick, waitForAsync } from '@angular/core/testing'; +import { ComponentFixture, TestBed, fakeAsync, flush, tick, waitForAsync } from '@angular/core/testing'; import { FormsModule } from '@angular/forms'; import { By } from '@angular/platform-browser'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; @@ -17,7 +17,6 @@ import { DatepickerModule } from './datepicker.module'; [(ngModel)]="dateRange" #dateRangePicker="dateRangePicker" (selectedRangeChange)="getValue($event)" - [cssClass]="cssClass" [showTime]="showTime" [disabled]="disabled" @@ -34,7 +33,7 @@ import { DatepickerModule } from './datepicker.module';
-
+
@@ -64,13 +63,13 @@ class TestDateRangePickerComponent { getValue = jasmine.createSpy('get value'); toggle = true; everyRange(range) { - return range.every(_ => !!_); + return range.every((_) => !!_); } chooseToday(fn) { fn([new Date(), new Date()], undefined, false); } - constructor() { } + constructor() {} } @Component({ @@ -78,7 +77,7 @@ class TestDateRangePickerComponent {
this is place holder
; - constructor() { } + constructor() {} today() { return [new Date(), new Date()]; } @@ -128,7 +127,7 @@ describe('dateRangePicker', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [DatepickerModule, NoopAnimationsModule, FormsModule], - declarations: [TestDateRangePickerComponent] + declarations: [TestDateRangePickerComponent], }).compileComponents(); })); @@ -145,10 +144,18 @@ describe('dateRangePicker', () => { it('should datePicker show, should hideOnRangeSelected works', fakeAsync(() => { openDatePicker(fixture); const classList = [ - '.devui-date-range-wrapper', '.devui-date-range-picker', '.devui-date-picker', - '.devui-month-view', '.devui-month-view-table', - '.devui-calender-header', '.devui-week-header', '.devui-date-title', - '.devui-day', '.devui-out-of-month', '.devui-in-month-day', '.devui-calendar-date' + '.devui-date-range-wrapper', + '.devui-date-range-picker', + '.devui-date-picker', + '.devui-month-view', + '.devui-month-view-table', + '.devui-calender-header', + '.devui-week-header', + '.devui-date-title', + '.devui-day', + '.devui-out-of-month', + '.devui-in-month-day', + '.devui-calendar-date', ]; expect(domHelper.judgeAppendToBodyStyleClasses(classList)).toBeTruthy(); @@ -229,8 +236,8 @@ describe('dateRangePicker', () => { max: 2020, format: { date: 'MM.dd.y', - time: 'MM.dd.y mm-ss-HH' - } + time: 'MM.dd.y mm-ss-HH', + }, }; }); @@ -263,7 +270,7 @@ describe('dateRangePicker', () => { describe('test wrong control', () => { beforeEach(() => { component.dateConfig = { - timePicker: true + timePicker: true, }; }); @@ -286,7 +293,7 @@ describe('dateRangePickerOrigin', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [DatepickerModule, NoopAnimationsModule, FormsModule], - declarations: [TestDateRangePickerOriginComponent] + declarations: [TestDateRangePickerOriginComponent], }).compileComponents(); })); @@ -331,7 +338,7 @@ describe('dateRangePickerComponent', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [DatepickerModule, NoopAnimationsModule, FormsModule], - declarations: [TestDateRangePickerCmpComponent] + declarations: [TestDateRangePickerCmpComponent], }).compileComponents(); })); @@ -349,7 +356,6 @@ describe('dateRangePickerComponent', () => { component.selectedRange = [new Date(), new Date()]; fixture.detectChanges(); expect(debugEl.queryAll(By.css('.active.devui-in-month-day')).length).toBe(1); - })); it('should template works', fakeAsync(() => { @@ -392,8 +398,8 @@ describe('dateRangePickerComponent', () => { max: 2020, format: { date: 'MM.dd.y', - time: 'MM.dd.y mm-ss-HH' - } + time: 'MM.dd.y mm-ss-HH', + }, }; }); @@ -408,7 +414,7 @@ describe('dateRangePickerComponent', () => { describe('test wrong control', () => { beforeEach(() => { component.dateConfig = { - timePicker: true + timePicker: true, }; }); @@ -423,7 +429,7 @@ describe('dateRangePickerComponent', () => { }); function padZero(value) { - return (String(value)).padStart(2, '0'); + return String(value).padStart(2, '0'); } function resolveMonth(str) { @@ -484,49 +490,49 @@ function testNgModelAndYearMonth(fixture, wrapperEle, component) { }, monthShow: (ele) => { return resolveMonth(ele.textContent.trim()); - } + }, }; const showEle = { left: { year: fun.showEles[0], - month: fun.showEles[1] + month: fun.showEles[1], }, right: { year: fun.showEles[2], - month: fun.showEles[3] - } + month: fun.showEles[3], + }, }; const currentShowNum = { left: { year: fun.yearShow(showEle.left.year), - month: fun.monthShow(showEle.left.month) + month: fun.monthShow(showEle.left.month), }, right: { year: fun.yearShow(showEle.right.year), - month: fun.monthShow(showEle.right.month) - } + month: fun.monthShow(showEle.right.month), + }, }; const btnEle = { left: { year: { last: fun.btnEles(0, 0), - next: fun.btnEles(0, 3) + next: fun.btnEles(0, 3), }, month: { last: fun.btnEles(0, 1), - next: fun.btnEles(0, 2) - } + next: fun.btnEles(0, 2), + }, }, right: { year: { next: fun.btnEles(1, 3), - last: fun.btnEles(1, 0) + last: fun.btnEles(1, 0), }, month: { next: fun.btnEles(1, 2), - last: fun.btnEles(1, 1) - } - } + last: fun.btnEles(1, 1), + }, + }, }; for (const side in btnEle) { @@ -536,7 +542,7 @@ function testNgModelAndYearMonth(fixture, wrapperEle, component) { let current = 0; for (const type in btnEle[side][time]) { if (type) { - current = type === 'next' ? (current + 1) : (current - 1); + current = type === 'next' ? current + 1 : current - 1; btnEle[side][time][type].dispatchEvent(new Event('click')); fixture.detectChanges(); let currentMonth = Number(currentShowNum[side][time]) + current; @@ -566,12 +572,10 @@ function testNgModelAndYearMonth(fixture, wrapperEle, component) { expect(component.inputEle.nativeElement.value).toBe( `${strDate(0, 0, 0, leftCurrentDay)}${component.splitter}${strDate(0, 1, 0, rightCurrentDay)}` ); - expect(component.dateRange).toEqual( - [ - new Date(new Date().getFullYear(), new Date().getMonth(), leftCurrentDay), - new Date(new Date().getFullYear(), new Date().getMonth() + 1, rightCurrentDay, 23, 59, 59) - ] - ); + expect(component.dateRange).toEqual([ + new Date(new Date().getFullYear(), new Date().getMonth(), leftCurrentDay), + new Date(new Date().getFullYear(), new Date().getMonth() + 1, rightCurrentDay, 23, 59, 59), + ]); closeDatePicker(fixture); component.dateRange = [new Date(), new Date(new Date().getFullYear(), new Date().getMonth() + 1, new Date().getDate())]; @@ -585,9 +589,7 @@ function testNgModelAndYearMonth(fixture, wrapperEle, component) { rightCurrentDayInListEle = rightDayListEle.querySelector('.active'); leftCurrentDay = leftCurrentDayInListEle.querySelector('.devui-calendar-date').textContent.trim(); rightCurrentDay = rightCurrentDayInListEle.querySelector('.devui-calendar-date').textContent.trim(); - expect(component.inputEle.nativeElement.value).toBe( - `${strDate(0, 0, 0)}${component.splitter}${strDate(0, 1, 0)}` - ); + expect(component.inputEle.nativeElement.value).toBe(`${strDate(0, 0, 0)}${component.splitter}${strDate(0, 1, 0)}`); expect(Number(leftCurrentDay)).toBe(new Date().getDate()); expect(Number(rightCurrentDay)).toBe(new Date(strDate(0, 1, 0)).getDate()); closeDatePicker(fixture); @@ -602,12 +604,10 @@ function testNgModelAndYearMonth(fixture, wrapperEle, component) { rightCurrentDayInListEle = rightDayListEle.querySelector('.active'); leftCurrentDay = leftCurrentDayInListEle.querySelector('.devui-calendar-date').textContent.trim(); rightCurrentDay = rightCurrentDayInListEle.querySelector('.devui-calendar-date').textContent.trim(); - expect(component.dateRange).toEqual( - [ - new Date(new Date().getFullYear(), new Date().getMonth(), 5), - new Date(new Date().getFullYear(), new Date().getMonth() + 1, 5) - ] - ); + expect(component.dateRange).toEqual([ + new Date(new Date().getFullYear(), new Date().getMonth(), 5), + new Date(new Date().getFullYear(), new Date().getMonth() + 1, 5), + ]); expect(leftCurrentDay).toBe('05'); expect(rightCurrentDay).toBe('05'); closeDatePicker(fixture); @@ -678,11 +678,11 @@ function testInputParam(fixture, wrapperEle, component) { let rightCurrentDayInListEle; for (const dayEl of leftDayListEle.querySelectorAll('.devui-in-month-day')) { const dayNumber = Number(dayEl.querySelector('.devui-calendar-date').textContent.trim()); - if (dayNumber === (minDate.getDate() - 1)) { + if (dayNumber === minDate.getDate() - 1) { expect(dayEl.classList).toContain('disabled'); tickEvent(dayEl, new Event('mouseover'), fixture); dayEl.dispatchEvent(new Event('click')); - } else if (dayNumber === (minDate.getDate())) { + } else if (dayNumber === minDate.getDate()) { leftCurrentDayInListEle = dayEl; } } @@ -693,11 +693,11 @@ function testInputParam(fixture, wrapperEle, component) { } for (const dayEl of rightDayListEle.querySelectorAll('.devui-in-month-day')) { const dayNumber = Number(dayEl.querySelector('.devui-calendar-date').textContent.trim()); - if (dayNumber === (component.maxDate.getDate() + 1)) { + if (dayNumber === component.maxDate.getDate() + 1) { expect(dayEl.classList).toContain('disabled'); tickEvent(dayEl, new Event('mouseover'), fixture); dayEl.dispatchEvent(new Event('click')); - } else if (dayNumber === (component.maxDate.getDate())) { + } else if (dayNumber === component.maxDate.getDate()) { rightCurrentDayInListEle = dayEl; } } @@ -738,25 +738,23 @@ function testTimePicker(fixture, wrapperEle, component) { let picker = { left: wrapperEle.querySelectorAll('.devui-date-picker')[0], - right: wrapperEle.querySelectorAll('.devui-date-picker')[1] + right: wrapperEle.querySelectorAll('.devui-date-picker')[1], }; - expect(picker['left'].querySelector('.devui-timepicker')).toBeTruthy(); - expect(picker['right'].querySelector('.devui-timepicker')).toBeTruthy(); + expect(picker.left.querySelector('.devui-timepicker')).toBeTruthy(); + expect(picker.right.querySelector('.devui-timepicker')).toBeTruthy(); closeDatePicker(fixture); - component.dateRange = [new Date(new Date().getFullYear(), - new Date().getMonth(), - new Date().getDate()), - new Date(new Date().getFullYear(), - new Date().getMonth() + 1, - new Date().getDate())]; + component.dateRange = [ + new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate()), + new Date(new Date().getFullYear(), new Date().getMonth() + 1, new Date().getDate()), + ]; fixture.detectChanges(); tick(); fixture.detectChanges(); openDatePicker(fixture); picker = { left: wrapperEle.querySelectorAll('.devui-date-picker')[0], - right: wrapperEle.querySelectorAll('.devui-date-picker')[1] + right: wrapperEle.querySelectorAll('.devui-date-picker')[1], }; function timeEles(whichPicker, type) { const index = ['hours', 'minutes', 'seconds'].indexOf(type); @@ -770,45 +768,45 @@ function testTimePicker(fixture, wrapperEle, component) { } const timeInputEle = { left: { - hours: timeInputEles(picker['left'], 'hours'), - minutes: timeInputEles(picker['left'], 'minutes'), - seconds: timeInputEles(picker['left'], 'seconds') + hours: timeInputEles(picker.left, 'hours'), + minutes: timeInputEles(picker.left, 'minutes'), + seconds: timeInputEles(picker.left, 'seconds'), }, right: { - hours: timeInputEles(picker['right'], 'hours'), - minutes: timeInputEles(picker['right'], 'minutes'), - seconds: timeInputEles(picker['right'], 'seconds') - } + hours: timeInputEles(picker.right, 'hours'), + minutes: timeInputEles(picker.right, 'minutes'), + seconds: timeInputEles(picker.right, 'seconds'), + }, }; const timeBtnEle = { left: { hours: { - up: timeBtnEles(picker['left'], 'hours', 'up'), - down: timeBtnEles(picker['left'], 'hours', 'down') + up: timeBtnEles(picker.left, 'hours', 'up'), + down: timeBtnEles(picker.left, 'hours', 'down'), }, minutes: { - up: timeBtnEles(picker['left'], 'minutes', 'up'), - down: timeBtnEles(picker['left'], 'minutes', 'down') + up: timeBtnEles(picker.left, 'minutes', 'up'), + down: timeBtnEles(picker.left, 'minutes', 'down'), }, seconds: { - up: timeBtnEles(picker['left'], 'seconds', 'up'), - down: timeBtnEles(picker['left'], 'seconds', 'down') - } + up: timeBtnEles(picker.left, 'seconds', 'up'), + down: timeBtnEles(picker.left, 'seconds', 'down'), + }, }, right: { hours: { - up: timeBtnEles(picker['right'], 'hours', 'up'), - down: timeBtnEles(picker['right'], 'hours', 'down') + up: timeBtnEles(picker.right, 'hours', 'up'), + down: timeBtnEles(picker.right, 'hours', 'down'), }, minutes: { - up: timeBtnEles(picker['right'], 'minutes', 'up'), - down: timeBtnEles(picker['right'], 'minutes', 'down') + up: timeBtnEles(picker.right, 'minutes', 'up'), + down: timeBtnEles(picker.right, 'minutes', 'down'), }, seconds: { - up: timeBtnEles(picker['right'], 'seconds', 'up'), - down: timeBtnEles(picker['right'], 'seconds', 'down') - } - } + up: timeBtnEles(picker.right, 'seconds', 'up'), + down: timeBtnEles(picker.right, 'seconds', 'down'), + }, + }, }; for (const side in timeBtnEle) { @@ -852,8 +850,13 @@ function testTimePicker(fixture, wrapperEle, component) { for (const time in timeInputEle[side]) { if (time) { const arr = ['hours', 'minutes', 'seconds']; - testTimePickerBtn(picker[side].querySelectorAll('.devui-btn-nav')[arr.indexOf(time)], - fixture, timeEvent, timeInputEle[side][time], component); + testTimePickerBtn( + picker[side].querySelectorAll('.devui-btn-nav')[arr.indexOf(time)], + fixture, + timeEvent, + timeInputEle[side][time], + component + ); } } } @@ -865,24 +868,38 @@ function testTimePicker(fixture, wrapperEle, component) { expect(component.getValue).toHaveBeenCalled(); expect(component.inputEle.nativeElement.value).toBe( /* eslint-disable-next-line max-len*/ - `${strDate(0, 0, 0)} 0${timeEvent}:0${timeEvent}:0${timeEvent}${component.splitter}${strDate(0, 1, 0)} 0${timeEvent}:0${timeEvent}:0${timeEvent}` - ); - expect(component.dateRange).toEqual( - [ - new Date(new Date().getFullYear(), - new Date().getMonth(), - new Date().getDate(), Number(timeEvent), Number(timeEvent), Number(timeEvent)), - new Date(new Date().getFullYear(), - new Date().getMonth() + 1, - new Date().getDate(), Number(timeEvent), Number(timeEvent), Number(timeEvent)) - ] + `${strDate(0, 0, 0)} 0${timeEvent}:0${timeEvent}:0${timeEvent}${component.splitter}${strDate( + 0, + 1, + 0 + )} 0${timeEvent}:0${timeEvent}:0${timeEvent}` ); + expect(component.dateRange).toEqual([ + new Date( + new Date().getFullYear(), + new Date().getMonth(), + new Date().getDate(), + Number(timeEvent), + Number(timeEvent), + Number(timeEvent) + ), + new Date( + new Date().getFullYear(), + new Date().getMonth() + 1, + new Date().getDate(), + Number(timeEvent), + Number(timeEvent), + Number(timeEvent) + ), + ]); } function testTimePickerInput(inputEle, fixture, timeEvent) { const backSpaceKeyboard = EventHelper.createKeyBoardEvent('keydown', { key: 'Backspace', keyCode: 8 }); const keyBoardEvent = EventHelper.createKeyBoardEvent('keydown', { - key: timeEvent, code: `Digit${timeEvent}`, charCode: 48 + Number(timeEvent) + key: timeEvent, + code: `Digit${timeEvent}`, + charCode: 48 + Number(timeEvent), }); const changeEvent = new Event('change'); tickEvent(inputEle, backSpaceKeyboard, fixture); @@ -913,8 +930,10 @@ function testTimePickerBtn(btnWrapperEle, fixture, timeEvent, inputEle, componen } function testDateConfig(fixture, wrapperEle, component) { - component.dateRange = [new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate()), - new Date(new Date().getFullYear(), new Date().getMonth() + 1, new Date().getDate())]; + component.dateRange = [ + new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate()), + new Date(new Date().getFullYear(), new Date().getMonth() + 1, new Date().getDate()), + ]; fixture.detectChanges(); tick(); fixture.detectChanges(); diff --git a/devui/datepicker/datepicker-cdk-overlay.component.ts b/devui/datepicker/datepicker-cdk-overlay.component.ts index 126edbae..a7ff81cc 100755 --- a/devui/datepicker/datepicker-cdk-overlay.component.ts +++ b/devui/datepicker/datepicker-cdk-overlay.component.ts @@ -16,7 +16,7 @@ import { SimpleChanges, TemplateRef, ViewContainerRef, - forwardRef + forwardRef, } from '@angular/core'; import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; import { I18nInterface, I18nService } from 'ng-devui/i18n'; @@ -28,7 +28,7 @@ import { addClassToOrigin, fadeInOut, formWithDropDown, - removeClassFromOrigin + removeClassFromOrigin, } from 'ng-devui/utils'; import { Observable, Subscription, fromEvent } from 'rxjs'; import { debounceTime, filter, map } from 'rxjs/operators'; @@ -38,38 +38,47 @@ import { DatePickerConfigService as DatePickerConfig } from './date-picker.confi @Component({ /* eslint-disable-next-line @angular-eslint/component-selector*/ selector: '[dDatepicker][appendToBody]', - providers: [{ - provide: NG_VALUE_ACCESSOR, - useExisting: forwardRef(() => DatePickerAppendToBodyComponent), - multi: true - }], + providers: [ + { + provide: NG_VALUE_ACCESSOR, + useExisting: forwardRef(() => DatePickerAppendToBodyComponent), + multi: true, + }, + ], exportAs: 'datepicker', template: ` - - + + `, - animations: [ - fadeInOut - ], + animations: [fadeInOut], styleUrls: ['./datepicker-cdk-overlay.component.scss'], preserveWhitespaces: false, }) export class DatePickerAppendToBodyComponent implements OnInit, OnChanges, OnDestroy, ControlValueAccessor { - @Input() appendToBodyDirections: Array = [ - 'rightDown', 'leftDown', 'rightUp', 'leftUp' - ]; + @Input() appendToBodyDirections: Array = ['rightDown', 'leftDown', 'rightUp', 'leftUp']; @Input() locale: string; @Input() cssClass: string; @Input() disabled: boolean; @@ -123,7 +132,7 @@ export class DatePickerAppendToBodyComponent implements OnInit, OnChanges, OnDes @Input() set dateFormat(dateFormat: string) { if (dateFormat && this._dateFormat !== dateFormat) { this._dateFormat = dateFormat; - this.writeModelValue({selectedDate: this.selectedDate, reason: SelectDateChangeReason.format}); + this.writeModelValue({ selectedDate: this.selectedDate, reason: SelectDateChangeReason.format }); } } @@ -173,12 +182,17 @@ export class DatePickerAppendToBodyComponent implements OnInit, OnChanges, OnDes return this._isOpen; } - constructor(private elementRef: ElementRef, private viewContainerRef: ViewContainerRef, - private renderer2: Renderer2, private datePickerConfig: DatePickerConfig, private i18n: I18nService, - private cdr: ChangeDetectorRef, - @Inject(DOCUMENT) private doc: any) { - this._dateConfig = datePickerConfig['dateConfig']; - this.dateConverter = datePickerConfig['dateConfig'].dateConverter || new DefaultDateConverter(); + constructor( + private elementRef: ElementRef, + private viewContainerRef: ViewContainerRef, + private renderer2: Renderer2, + private datePickerConfig: DatePickerConfig, + private i18n: I18nService, + private cdr: ChangeDetectorRef, + @Inject(DOCUMENT) private doc: any + ) { + this._dateConfig = datePickerConfig.dateConfig; + this.dateConverter = datePickerConfig.dateConfig.dateConverter || new DefaultDateConverter(); this.setI18nText(); this.document = this.doc; } @@ -193,8 +207,10 @@ export class DatePickerAppendToBodyComponent implements OnInit, OnChanges, OnDes } checkDateConfig(dateConfig: any) { - if (!dateConfig) { return false; } - if (typeof(dateConfig.timePicker) !== 'boolean' || !dateConfig.max || !dateConfig.min || !dateConfig.format) { + if (!dateConfig) { + return false; + } + if (typeof dateConfig.timePicker !== 'boolean' || !dateConfig.max || !dateConfig.min || !dateConfig.format) { return false; } return true; @@ -213,7 +229,7 @@ export class DatePickerAppendToBodyComponent implements OnInit, OnChanges, OnDes } ngOnChanges(changes: SimpleChanges) { - if (changes['appendToBodyDirections']) { + if (changes.appendToBodyDirections) { this.setPositions(); } } @@ -235,10 +251,8 @@ export class DatePickerAppendToBodyComponent implements OnInit, OnChanges, OnDes } writeValue(obj: any): void { - this.selectedDate = obj ? - this.dateConverter.parse(obj, this.dateFormat, this.locale || this.i18nLocale) : null; - const value = - this.selectedDate ? this.dateConverter.format(this.selectedDate, this.dateFormat, this.locale || this.i18nLocale) : ''; + this.selectedDate = obj ? this.dateConverter.parse(obj, this.dateFormat, this.locale || this.i18nLocale) : null; + const value = this.selectedDate ? this.dateConverter.format(this.selectedDate, this.dateFormat, this.locale || this.i18nLocale) : ''; this.renderer2.setProperty(this.elementRef.nativeElement, 'value', value); } @@ -250,19 +264,19 @@ export class DatePickerAppendToBodyComponent implements OnInit, OnChanges, OnDes } timeChange(dateObj) { - this.writeValue(dateObj ? dateObj['selectedDate'] : null); + this.writeValue(dateObj ? dateObj.selectedDate : null); this.writeModelValue(dateObj); - if (dateObj && (dateObj['reason'] === SelectDateChangeReason.date && !this.showTime || - dateObj['reason'] === SelectDateChangeReason.button)) { + if ( + dateObj && + ((dateObj.reason === SelectDateChangeReason.date && !this.showTime) || dateObj.reason === SelectDateChangeReason.button) + ) { this.isOpen = false; } } updateCdkConnectedOverlayOrigin() { if (this.elementRef.nativeElement) { - this.cdkConnectedOverlayOrigin = new CdkOverlayOrigin( - formWithDropDown(this.elementRef) || this.elementRef.nativeElement - ); + this.cdkConnectedOverlayOrigin = new CdkOverlayOrigin(formWithDropDown(this.elementRef) || this.elementRef.nativeElement); } } @@ -306,7 +320,7 @@ export class DatePickerAppendToBodyComponent implements OnInit, OnChanges, OnDes this.onTouched(); this.selectedDateChange.emit({ reason: dateReason, - selectedDate: this.selectedDate + selectedDate: this.selectedDate, }); } @@ -325,18 +339,22 @@ export class DatePickerAppendToBodyComponent implements OnInit, OnChanges, OnDes break; case 'bottom': this.datepickerPosition = 'top'; + break; + default: } } setPositions() { if (this.appendToBodyDirections && this.appendToBodyDirections.length > 0) { - this.positions = this.appendToBodyDirections.map(position => { - if (typeof position === 'string') { - return AppendToBodyDirectionsConfig[position]; - } else { - return position; - } - }).filter(position => position !== undefined); + this.positions = this.appendToBodyDirections + .map((position) => { + if (typeof position === 'string') { + return AppendToBodyDirectionsConfig[position]; + } else { + return position; + } + }) + .filter((position) => position !== undefined); } else { this.positions = undefined; } @@ -351,8 +369,8 @@ export class DatePickerAppendToBodyComponent implements OnInit, OnChanges, OnDes return; } const valueDate = new Date(value); - const valueFormat = valueDate && !isNaN(valueDate.getTime()) && - this.dateConverter.format(valueDate, this.dateFormat, this.locale || this.i18nLocale); + const valueFormat = + valueDate && !isNaN(valueDate.getTime()) && this.dateConverter.format(valueDate, this.dateFormat, this.locale || this.i18nLocale); if (new Date(valueFormat).getTime() === new Date(this.selectedDate).getTime() || !this.validateDate(value)) { return; } @@ -362,17 +380,18 @@ export class DatePickerAppendToBodyComponent implements OnInit, OnChanges, OnDes this.selectedDate = valueDate; this.writeModelValue({ reason: SelectDateChangeReason.custom, - selectedDate: valueDate + selectedDate: valueDate, }); } } validateDate(value: string) { const valueDate = new Date(value); - const valueFormat = valueDate && !isNaN(valueDate.getTime()) && - this.dateConverter.format(valueDate, this.dateFormat, this.locale || this.i18nLocale); + const valueFormat = + valueDate && !isNaN(valueDate.getTime()) && this.dateConverter.format(valueDate, this.dateFormat, this.locale || this.i18nLocale); if ( - !valueDate || value !== valueFormat || + !valueDate || + value !== valueFormat || (value === valueFormat && (valueDate.getTime() < this.minDate.getTime() || valueDate.getTime() > this.maxDate.getTime())) ) { return false; @@ -382,9 +401,7 @@ export class DatePickerAppendToBodyComponent implements OnInit, OnChanges, OnDes } resetValue() { - const resDate = this.selectedDate ? - this.dateConverter.format(this.selectedDate, this.dateFormat, this.locale || this.i18nLocale) : - ''; + const resDate = this.selectedDate ? this.dateConverter.format(this.selectedDate, this.dateFormat, this.locale || this.i18nLocale) : ''; this.elementRef.nativeElement.value = resDate; } @@ -399,7 +416,7 @@ export class DatePickerAppendToBodyComponent implements OnInit, OnChanges, OnDes const currentReason = typeof reason === 'number' ? reason : SelectDateChangeReason.custom; this.selectedDateChange.emit({ reason: currentReason, - selectedDate: null + selectedDate: null, }); }; diff --git a/devui/datepicker/datepicker.component.ts b/devui/datepicker/datepicker.component.ts index 777fbd61..af411baf 100755 --- a/devui/datepicker/datepicker.component.ts +++ b/devui/datepicker/datepicker.component.ts @@ -12,7 +12,7 @@ import { Output, Renderer2, SimpleChanges, - TemplateRef + TemplateRef, } from '@angular/core'; import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; import { I18nInterface, I18nService } from 'ng-devui/i18n'; @@ -25,12 +25,14 @@ import { DatePickerConfigService as DatePickerConfig } from './date-picker.confi selector: 'd-datepicker', templateUrl: './datepicker.component.html', styleUrls: ['./datepicker.component.scss'], - providers: [{ - provide: NG_VALUE_ACCESSOR, - useExisting: forwardRef(() => DatepickerComponent), - multi: true - }], - preserveWhitespaces: false + providers: [ + { + provide: NG_VALUE_ACCESSOR, + useExisting: forwardRef(() => DatepickerComponent), + multi: true, + }, + ], + preserveWhitespaces: false, }) export class DatepickerComponent implements OnInit, OnChanges, OnDestroy, ControlValueAccessor { static DAY_DURATION = 24 * 60 * 60 * 1000; @@ -45,7 +47,7 @@ export class DatepickerComponent implements OnInit, OnChanges, OnDestroy, Contro @Input() disabled = false; @Input() customViewTemplate: TemplateRef; @Input() selectedDate: Date; - @Input() mode: 'year'|'month'|'date' = 'date'; + @Input() mode: 'year' | 'month' | 'date' = 'date'; @Input() dateFormat: string; yearNumber = 12; _yearNumber = 12; @@ -78,8 +80,8 @@ export class DatepickerComponent implements OnInit, OnChanges, OnDestroy, Contro protected changeDetectorRef: ChangeDetectorRef, protected i18n: I18nService ) { - this._dateConfig = datePickerConfig['dateConfig']; - this.dateConverter = datePickerConfig['dateConfig'].dateConverter || new DefaultDateConverter(); + this._dateConfig = datePickerConfig.dateConfig; + this.dateConverter = datePickerConfig.dateConfig.dateConverter || new DefaultDateConverter(); this.renderer2.setStyle(this.elementRef.nativeElement, 'display', 'inline-block'); this.setI18nText(); } @@ -91,10 +93,14 @@ export class DatepickerComponent implements OnInit, OnChanges, OnDestroy, Contro this.hourOptions = new Array(24).fill(0).map((value, index) => this.fillLeft(index)); this.minuteOptions = new Array(60).fill(0).map((value, index) => this.fillLeft(index)); const nowDate = this.selectedDate || new Date(); - this.nowMinYear = (nowDate).getFullYear() - Math.floor(this._yearNumber / 2) < this.minDate.getFullYear() ? - this.minDate.getFullYear() : (nowDate).getFullYear() - Math.floor(this._yearNumber / 2); - this.nowMaxYear = (nowDate).getFullYear() + Math.floor(this._yearNumber / 2) > this.maxDate.getFullYear() ? - this.maxDate.getFullYear() : (nowDate).getFullYear() + Math.floor(this._yearNumber / 2); + this.nowMinYear = + nowDate.getFullYear() - Math.floor(this._yearNumber / 2) < this.minDate.getFullYear() + ? this.minDate.getFullYear() + : nowDate.getFullYear() - Math.floor(this._yearNumber / 2); + this.nowMaxYear = + nowDate.getFullYear() + Math.floor(this._yearNumber / 2) > this.maxDate.getFullYear() + ? this.maxDate.getFullYear() + : nowDate.getFullYear() + Math.floor(this._yearNumber / 2); this.initMode(); this.onSelectDateChanged(); this.onDisplayWeeksChange(); @@ -106,25 +112,25 @@ export class DatepickerComponent implements OnInit, OnChanges, OnDestroy, Contro if (this.mode === 'year') { this.openChooseYear = true; this.openChooseMonth = false; - if(!this.selectedDate){ + if (!this.selectedDate) { this.selectedDate = new Date(); } - if(this.maxDate.getTime() < this.selectedDate.getTime()){ + if (this.maxDate.getTime() < this.selectedDate.getTime()) { this.selectedDate = new Date(this.maxDate); } - if(this.minDate.getTime() > this.selectedDate.getTime()){ + if (this.minDate.getTime() > this.selectedDate.getTime()) { this.selectedDate = new Date(this.minDate); } } else if (this.mode === 'month') { this.openChooseYear = false; this.openChooseMonth = true; - if(!this.selectedDate){ + if (!this.selectedDate) { this.selectedDate = new Date(); } - if(this.maxDate.getTime() < this.selectedDate.getTime()){ + if (this.maxDate.getTime() < this.selectedDate.getTime()) { this.selectedDate = new Date(this.maxDate); } - if(this.minDate.getTime() > this.selectedDate.getTime()){ + if (this.minDate.getTime() > this.selectedDate.getTime()) { this.selectedDate = new Date(this.minDate); } } else { @@ -133,7 +139,7 @@ export class DatepickerComponent implements OnInit, OnChanges, OnDestroy, Contro } ngOnChanges(changes: SimpleChanges) { - if (changes && changes['selectedDate'] && changes['selectedDate'].currentValue) { + if (changes?.selectedDate?.currentValue) { this.writeValue(this.selectedDate); } } @@ -172,8 +178,10 @@ export class DatepickerComponent implements OnInit, OnChanges, OnDestroy, Contro } checkDateConfig(dateConfig: any) { - if (!dateConfig) { return false; } - if (typeof(dateConfig.timePicker) !== 'boolean' || !dateConfig.max || !dateConfig.min) { + if (!dateConfig) { + return false; + } + if (typeof dateConfig.timePicker !== 'boolean' || !dateConfig.max || !dateConfig.min) { return false; } return true; @@ -227,12 +235,16 @@ export class DatepickerComponent implements OnInit, OnChanges, OnDestroy, Contro protected resetYearOptions() { this.initMode(); - const baseYear = this.selectedDate ? this.selectedDate.getFullYear() : (new Date()).getFullYear(); + const baseYear = this.selectedDate ? this.selectedDate.getFullYear() : new Date().getFullYear(); this.currentYear = baseYear; - this.nowMinYear = baseYear - Math.floor(this._yearNumber / 2) < this.minDate.getFullYear() ? - this.minDate.getFullYear() : baseYear - Math.floor(this._yearNumber / 2); - this.nowMaxYear = baseYear + Math.floor(this._yearNumber / 2) > this.maxDate.getFullYear() ? - this.maxDate.getFullYear() : baseYear + Math.floor(this._yearNumber / 2); + this.nowMinYear = + baseYear - Math.floor(this._yearNumber / 2) < this.minDate.getFullYear() + ? this.minDate.getFullYear() + : baseYear - Math.floor(this._yearNumber / 2); + this.nowMaxYear = + baseYear + Math.floor(this._yearNumber / 2) > this.maxDate.getFullYear() + ? this.maxDate.getFullYear() + : baseYear + Math.floor(this._yearNumber / 2); this.onYearRangeChange(); } @@ -254,7 +266,7 @@ export class DatepickerComponent implements OnInit, OnChanges, OnDestroy, Contro const title = baseYear - this._yearNumber / 2 + index; return { title: title, - disabled: false + disabled: false, }; }); if (this._yearNumber > this.nowMaxYear - this.nowMinYear + 1) { @@ -441,9 +453,10 @@ export class DatepickerComponent implements OnInit, OnChanges, OnDestroy, Contro day: this.fillLeft(currentDate.getDate()), date: currentDate, inMonth: currentDate.getMonth().toString() === this.currentMonthIndex.toString(), - isToday: currentDate.getFullYear() === today.getFullYear() && + isToday: + currentDate.getFullYear() === today.getFullYear() && currentDate.getMonth() === today.getMonth() && - currentDate.getDate() === today.getDate() + currentDate.getDate() === today.getDate(), }; }); displayWeeks.push(weekDays); @@ -456,20 +469,26 @@ export class DatepickerComponent implements OnInit, OnChanges, OnDestroy, Contro return { index: index, title: this.i18nText.monthsOfYear[index], - disabled: false + disabled: false, }; }); if (this.currentYear < this.minDate.getFullYear() || this.currentYear > this.maxDate.getFullYear()) { - all.forEach(month => {month.disabled = true; }); + all.forEach((month) => { + month.disabled = true; + }); } if (this.currentYear === this.minDate.getFullYear()) { - all.forEach(month => {month.disabled = month.index < this.minDate.getMonth(); }); + all.forEach((month) => { + month.disabled = month.index < this.minDate.getMonth(); + }); } if (this.currentYear === this.maxDate.getFullYear()) { - all.forEach(month => {month.disabled = month.index > this.maxDate.getMonth(); }); + all.forEach((month) => { + month.disabled = month.index > this.maxDate.getMonth(); + }); } return all; } @@ -488,8 +507,7 @@ export class DatepickerComponent implements OnInit, OnChanges, OnDestroy, Contro const minDate = new Date(this.minDate.getFullYear(), this.minDate.getMonth(), this.minDate.getDate()); const maxDate = new Date(this.maxDate.getFullYear(), this.maxDate.getMonth(), this.maxDate.getDate(), 23, 59, 59); const dis = date.getTime() < minDate.getTime(); - return this.disabled || (date.getTime() < minDate.getTime() || - date.getTime() > maxDate.getTime()); + return this.disabled || date.getTime() < minDate.getTime() || date.getTime() > maxDate.getTime(); } isSelectDay(date) { @@ -504,8 +522,8 @@ export class DatepickerComponent implements OnInit, OnChanges, OnDestroy, Contro } /* - ** @param invocation:调用时机 - */ + ** @param invocation:调用时机 + */ onSelectDate($event, date, invocation?: any, reason?: SelectDateChangeReason) { if ($event.stopPropagation) { $event.stopPropagation(); @@ -513,12 +531,18 @@ export class DatepickerComponent implements OnInit, OnChanges, OnDestroy, Contro if (this.isDisabledDay(date)) { return; } - this.selectedDate = new Date(date.getFullYear(), date.getMonth(), date.getDate(), - Number(this.currentHour), Number(this.currentMinute), Number(this.currentSecond)); + this.selectedDate = new Date( + date.getFullYear(), + date.getMonth(), + date.getDate(), + Number(this.currentHour), + Number(this.currentMinute), + Number(this.currentSecond) + ); const currentReason = typeof reason === 'number' ? reason : SelectDateChangeReason.date; const dateObj = { reason: currentReason, - selectedDate: this.selectedDate + selectedDate: this.selectedDate, }; this.onTouched(); this.writeValue(this.selectedDate); @@ -527,9 +551,7 @@ export class DatepickerComponent implements OnInit, OnChanges, OnDestroy, Contro this.onChange(dateObj); this.selectedDateChange.emit(dateObj); } - if (this.currentMonthIndex !== this.selectedDate.getMonth() || - this.currentYear !== this.selectedDate.getFullYear() - ) { + if (this.currentMonthIndex !== this.selectedDate.getMonth() || this.currentYear !== this.selectedDate.getFullYear()) { this.currentYear = this.selectedDate.getFullYear(); this.currentMonthIndex = this.selectedDate.getMonth(); this.onDisplayWeeksChange(); @@ -557,18 +579,19 @@ export class DatepickerComponent implements OnInit, OnChanges, OnDestroy, Contro timeType = 'currentSecond'; break; } + default: } - let value = event.target['value']; - const selectionStart = event.target['selectionStart']; - const selectionEnd = event.target['selectionEnd']; + let value = event.target.value; + const selectionStart = event.target.selectionStart; + const selectionEnd = event.target.selectionEnd; // 是数字的时候再处理，分为小键盘和数字键 if (/^(Digit|Numpad)\d$/.test(event.code)) { event.preventDefault(); let input; - if (event['clipboardData']) { - input = event['clipboardData'].getData('text'); - } else if (event['code']) { - input = event['code'].slice(event['code'].length - 1); + if (event.clipboardData) { + input = event.clipboardData.getData('text'); + } else if (event.code) { + input = event.code.slice(event.code.length - 1); } value = value.substring(0, selectionStart) + input + value.substring(selectionEnd); if (value.length === 3 && value.indexOf('0') === 0) { @@ -594,11 +617,17 @@ export class DatepickerComponent implements OnInit, OnChanges, OnDestroy, Contro onTimeChange() { const date = this.selectedDate || new Date(); - this.selectedDate = new Date(date.getFullYear(), - date.getMonth(), date.getDate(), Number(this.currentHour), Number(this.currentMinute), Number(this.currentSecond)); + this.selectedDate = new Date( + date.getFullYear(), + date.getMonth(), + date.getDate(), + Number(this.currentHour), + Number(this.currentMinute), + Number(this.currentSecond) + ); const dateObj = { reason: SelectDateChangeReason.time, - selectedDate: this.selectedDate + selectedDate: this.selectedDate, }; this.onTouched(); this.writeValue(this.selectedDate); @@ -609,17 +638,18 @@ export class DatepickerComponent implements OnInit, OnChanges, OnDestroy, Contro timeUp(type) { switch (type) { case 'h': { - Number(this.currentHour) < 23 ? this.currentHour = (Number(this.currentHour) + 1) : this.currentHour = 0; + Number(this.currentHour) < 23 ? (this.currentHour = Number(this.currentHour) + 1) : (this.currentHour = 0); break; } case 'm': { - Number(this.currentMinute) < 59 ? this.currentMinute = (Number(this.currentMinute) + 1) : this.currentMinute = 0; + Number(this.currentMinute) < 59 ? (this.currentMinute = Number(this.currentMinute) + 1) : (this.currentMinute = 0); break; } case 's': { - Number(this.currentSecond) < 59 ? this.currentSecond = (Number(this.currentSecond) + 1) : this.currentSecond = 0; + Number(this.currentSecond) < 59 ? (this.currentSecond = Number(this.currentSecond) + 1) : (this.currentSecond = 0); break; } + default: } this.onTimeChange(); } @@ -627,17 +657,18 @@ export class DatepickerComponent implements OnInit, OnChanges, OnDestroy, Contro timeDown(type) { switch (type) { case 'h': { - Number(this.currentHour) > 0 ? this.currentHour = (Number(this.currentHour) - 1) : this.currentHour = 23; + Number(this.currentHour) > 0 ? (this.currentHour = Number(this.currentHour) - 1) : (this.currentHour = 23); break; } case 'm': { - Number(this.currentMinute) > 0 ? this.currentMinute = (Number(this.currentMinute) - 1) : this.currentMinute = 59; + Number(this.currentMinute) > 0 ? (this.currentMinute = Number(this.currentMinute) - 1) : (this.currentMinute = 59); break; } case 's': { - Number(this.currentSecond) > 0 ? this.currentSecond = (Number(this.currentSecond) - 1) : this.currentSecond = 59; + Number(this.currentSecond) > 0 ? (this.currentSecond = Number(this.currentSecond) - 1) : (this.currentSecond = 59); break; } + default: } this.onTimeChange(); } @@ -648,7 +679,7 @@ export class DatepickerComponent implements OnInit, OnChanges, OnDestroy, Contro const currentReason = typeof reason === 'number' ? reason : SelectDateChangeReason.custom; const dateObj = { reason: currentReason, - selectedDate: null + selectedDate: null, }; // 清空时将null作为ngModelChange参数传出 this.onChange(dateObj); @@ -659,18 +690,18 @@ export class DatepickerComponent implements OnInit, OnChanges, OnDestroy, Contro $event.stopPropagation(); if (which === 'year') { if (this.mode === 'year') { - return ; + return; } else if (this.mode === 'month') { this.openChooseYear = true; this.openChooseMonth = false; - return ; + return; } else { this.openChooseYear = !this.openChooseYear; this.openChooseMonth = false; } } else { if (this.mode === 'month') { - return ; + return; } this.openChooseMonth = !this.openChooseMonth; this.openChooseYear = false; @@ -699,7 +730,7 @@ export class DatepickerComponent implements OnInit, OnChanges, OnDestroy, Contro event.stopPropagation(); const dateObj = { reason: SelectDateChangeReason.button, - selectedDate: this.selectedDate + selectedDate: this.selectedDate, }; this.writeValue(this.selectedDate); this.onChange(dateObj); @@ -722,7 +753,7 @@ export class DatepickerComponent implements OnInit, OnChanges, OnDestroy, Contro } this.currentMonthIndex = month.index; if (this.mode === 'month') { - this.onSelectDate({} , new Date(this.currentYear, this.currentMonthIndex, 1)); + this.onSelectDate({}, new Date(this.currentYear, this.currentMonthIndex, 1)); } else { this.onDisplayWeeksChange(); this.openChooseMonth = false; diff --git a/devui/datepicker/datepicker.directive.ts b/devui/datepicker/datepicker.directive.ts index 763e375f..36640e79 100755 --- a/devui/datepicker/datepicker.directive.ts +++ b/devui/datepicker/datepicker.directive.ts @@ -17,7 +17,7 @@ import { Output, Renderer2, TemplateRef, - ViewContainerRef + ViewContainerRef, } from '@angular/core'; import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; import { I18nInterface, I18nService } from 'ng-devui/i18n'; @@ -26,7 +26,10 @@ import { AnimationCurves, AnimationDuration, DateConverter, - DefaultDateConverter, DevConfigService, removeClassFromOrigin, WithConfig + DefaultDateConverter, + DevConfigService, + removeClassFromOrigin, + WithConfig, } from 'ng-devui/utils'; import { fromEvent, Observable, Subscription } from 'rxjs'; import { debounceTime, filter, map } from 'rxjs/operators'; @@ -158,8 +161,8 @@ export class DatepickerDirective implements OnInit, OnDestroy, ControlValueAcces private devConfigService: DevConfigService, @Inject(DOCUMENT) private doc: any ) { - this._dateConfig = datePickerConfig['dateConfig']; - this.dateConverter = datePickerConfig['dateConfig'].dateConverter || new DefaultDateConverter(); + this._dateConfig = datePickerConfig.dateConfig; + this.dateConverter = datePickerConfig.dateConfig.dateConverter || new DefaultDateConverter(); this.selectedDate = null; const factory = this.componentFactoryResolver.resolveComponentFactory(DatepickerComponent); this.cmpRef = this.viewContainerRef.createComponent(factory, this.viewContainerRef.length, this.injector); diff --git a/devui/datepicker/single-date-range-picker.component.ts b/devui/datepicker/single-date-range-picker.component.ts index d8c1e9e4..85b1c8b0 100644 --- a/devui/datepicker/single-date-range-picker.component.ts +++ b/devui/datepicker/single-date-range-picker.component.ts @@ -9,7 +9,7 @@ import { OnInit, Output, Renderer2, - SimpleChanges + SimpleChanges, } from '@angular/core'; import { NG_VALUE_ACCESSOR } from '@angular/forms'; import { I18nService } from 'ng-devui/i18n'; @@ -26,14 +26,15 @@ export interface SimpleDate { selector: 'd-datepicker-range-single', templateUrl: './single-date-range-picker.component.html', styleUrls: ['./single-date-range-picker.component.scss'], - providers: [{ - provide: NG_VALUE_ACCESSOR, - useExisting: forwardRef(() => SingleDateRangePickerComponent), - multi: true - }], + providers: [ + { + provide: NG_VALUE_ACCESSOR, + useExisting: forwardRef(() => SingleDateRangePickerComponent), + multi: true, + }, + ], preserveWhitespaces: false, }) - export class SingleDateRangePickerComponent extends SingleDatepickerComponent implements OnChanges, OnInit { @Input() selectedRange: Date[] = Array(2); @Input() rangePicker = false; @@ -64,10 +65,14 @@ export class SingleDateRangePickerComponent extends SingleDatepickerComponent im ngOnInit() { [this.rangeStart, this.rangeEnd] = this.selectedRange; const nowDate = this.selectedDate || new Date(); - this.nowMinYear = (nowDate).getFullYear() - Math.floor(this._yearNumber / 2) < this.minDate.getFullYear() ? - this.minDate.getFullYear() : (nowDate).getFullYear() - Math.floor(this._yearNumber / 2); - this.nowMaxYear = (nowDate).getFullYear() + Math.floor(this._yearNumber / 2) > this.maxDate.getFullYear() ? - this.maxDate.getFullYear() : (nowDate).getFullYear() + Math.floor(this._yearNumber / 2); + this.nowMinYear = + nowDate.getFullYear() - Math.floor(this._yearNumber / 2) < this.minDate.getFullYear() + ? this.minDate.getFullYear() + : nowDate.getFullYear() - Math.floor(this._yearNumber / 2); + this.nowMaxYear = + nowDate.getFullYear() + Math.floor(this._yearNumber / 2) > this.maxDate.getFullYear() + ? this.maxDate.getFullYear() + : nowDate.getFullYear() + Math.floor(this._yearNumber / 2); if (!this.isAuxiliary && !this.rangeStart) { // 主面板，未选择开始日期的情况 this.onSelectDateChanged(); @@ -94,8 +99,7 @@ export class SingleDateRangePickerComponent extends SingleDatepickerComponent im this.selectedDate = new Date(this.currentYear, this.currentMonthIndex); super.ngOnInit(); // 处理选择的日期范围开始和结束在同一个月的情况 - if (rangeStart && rangeEnd && rangeStart.getFullYear() === rangeEnd.getFullYear() && - rangeStart.getMonth() === rangeEnd.getMonth()) { + if (rangeStart && rangeEnd && rangeStart.getFullYear() === rangeEnd.getFullYear() && rangeStart.getMonth() === rangeEnd.getMonth()) { this.onNextMonth('init'); } this.selectedDate = new Date(this.currentYear, this.currentMonthIndex); @@ -105,8 +109,8 @@ export class SingleDateRangePickerComponent extends SingleDatepickerComponent im } /* - ** @param invocation:调用时机 - */ + ** @param invocation:调用时机 + */ onSelectDate($event, date, invocation?: any) { if ($event.stopPropagation) { $event.stopPropagation(); @@ -176,7 +180,7 @@ export class SingleDateRangePickerComponent extends SingleDatepickerComponent im this.onChange(selectedRange); this.rangeSelected.emit({ reason: currentReason, - selectedRange: selectedRange + selectedRange: selectedRange, }); } @@ -185,7 +189,7 @@ export class SingleDateRangePickerComponent extends SingleDatepickerComponent im if (this.selectingRange) { rangeSource = [this.rangeStart, this.previewEnd]; } - if ((!Array.isArray(rangeSource))) { + if (!Array.isArray(rangeSource)) { return; } return rangeSource.some((selectedDate) => { @@ -201,11 +205,9 @@ export class SingleDateRangePickerComponent extends SingleDatepickerComponent im } isBetweenDay(date) { - if (Array.isArray(this.selectedRange) && this.selectedRange.every(day => !!day)) { - const index = this.selectedRange.findIndex(day => { - return date.getFullYear() === day.getFullYear() && - date.getMonth() === day.getMonth() && - date.getDate() === day.getDate(); + if (Array.isArray(this.selectedRange) && this.selectedRange.every((day) => !!day)) { + const index = this.selectedRange.findIndex((day) => { + return date.getFullYear() === day.getFullYear() && date.getMonth() === day.getMonth() && date.getDate() === day.getDate(); }); return ['devui-day-start', 'devui-day-end'][index]; } else { @@ -221,17 +223,18 @@ export class SingleDateRangePickerComponent extends SingleDatepickerComponent im timeUp(type) { switch (type) { case 'h': { - Number(this.currentHour) < 23 ? this.currentHour = (Number(this.currentHour) + 1) : this.currentHour = 0; + Number(this.currentHour) < 23 ? (this.currentHour = Number(this.currentHour) + 1) : (this.currentHour = 0); break; } case 'm': { - Number(this.currentMinute) < 59 ? this.currentMinute = (Number(this.currentMinute) + 1) : this.currentMinute = 0; + Number(this.currentMinute) < 59 ? (this.currentMinute = Number(this.currentMinute) + 1) : (this.currentMinute = 0); break; } case 's': { - Number(this.currentSecond) < 59 ? this.currentSecond = (Number(this.currentSecond) + 1) : this.currentSecond = 0; + Number(this.currentSecond) < 59 ? (this.currentSecond = Number(this.currentSecond) + 1) : (this.currentSecond = 0); break; } + default: } this.timeChange(); } @@ -239,17 +242,18 @@ export class SingleDateRangePickerComponent extends SingleDatepickerComponent im timeDown(type) { switch (type) { case 'h': { - Number(this.currentHour) > 0 ? this.currentHour = (Number(this.currentHour) - 1) : this.currentHour = 23; + Number(this.currentHour) > 0 ? (this.currentHour = Number(this.currentHour) - 1) : (this.currentHour = 23); break; } case 'm': { - Number(this.currentMinute) > 0 ? this.currentMinute = (Number(this.currentMinute) - 1) : this.currentMinute = 59; + Number(this.currentMinute) > 0 ? (this.currentMinute = Number(this.currentMinute) - 1) : (this.currentMinute = 59); break; } case 's': { - Number(this.currentSecond) > 0 ? this.currentSecond = (Number(this.currentSecond) - 1) : this.currentSecond = 59; + Number(this.currentSecond) > 0 ? (this.currentSecond = Number(this.currentSecond) - 1) : (this.currentSecond = 59); break; } + default: } this.timeChange(); } @@ -275,18 +279,19 @@ export class SingleDateRangePickerComponent extends SingleDatepickerComponent im timeType = 'currentSecond'; break; } + default: } - let value = event.target['value']; - const selectionStart = event.target['selectionStart']; - const selectionEnd = event.target['selectionEnd']; + let value = event.target.value; + const selectionStart = event.target.selectionStart; + const selectionEnd = event.target.selectionEnd; // 是数字的时候再处理，分为小键盘和数字键 if (/^(Digit|Numpad)\d$/.test(event.code)) { event.preventDefault(); let input; - if (event['clipboardData']) { - input = event['clipboardData'].getData('text'); - } else if (event['code']) { - input = event['code'].slice(event['code'].length - 1); + if (event.clipboardData) { + input = event.clipboardData.getData('text'); + } else if (event.code) { + input = event.code.slice(event.code.length - 1); } value = value.substring(0, selectionStart) + input + value.substring(selectionEnd); if (value.length === 3 && value.indexOf('0') === 0) { @@ -316,11 +321,23 @@ export class SingleDateRangePickerComponent extends SingleDatepickerComponent im timeChange() { if (!this.isAuxiliary) { - this.rangeStart = new Date(this.rangeStart.getFullYear(), this.rangeStart.getMonth(), this.rangeStart.getDate(), - Number(this.currentHour), Number(this.currentMinute), Number(this.currentSecond)); + this.rangeStart = new Date( + this.rangeStart.getFullYear(), + this.rangeStart.getMonth(), + this.rangeStart.getDate(), + Number(this.currentHour), + Number(this.currentMinute), + Number(this.currentSecond) + ); } else { - this.rangeEnd = new Date(this.rangeEnd.getFullYear(), this.rangeEnd.getMonth(), this.rangeEnd.getDate(), - Number(this.currentHour), Number(this.currentMinute), Number(this.currentSecond)); + this.rangeEnd = new Date( + this.rangeEnd.getFullYear(), + this.rangeEnd.getMonth(), + this.rangeEnd.getDate(), + Number(this.currentHour), + Number(this.currentMinute), + Number(this.currentSecond) + ); } this.rangeChange(this.ensureRangeValueOrder([this.rangeStart, this.rangeEnd])); } @@ -332,19 +349,22 @@ export class SingleDateRangePickerComponent extends SingleDatepickerComponent im ngOnChanges(changes: SimpleChanges) { if (Object.prototype.hasOwnProperty.call(changes, 'selectedRange')) { this.selectingRange = false; - [this.rangeStart, this.rangeEnd] = changes['selectedRange'].currentValue; + [this.rangeStart, this.rangeEnd] = changes.selectedRange.currentValue; } } - isInRange(date) { + isInRange(dateParam) { + let date = dateParam; const rangeStart = this.rangeStart; let rangeEnd = this.rangeEnd; if (this.selectingRange) { rangeEnd = this.previewEnd; } - date = (new Date(date)).getTime(); - return date < Math.max((new Date(rangeStart)).getTime(), (new Date(rangeEnd)).getTime()) - && date > Math.min((new Date(rangeStart)).getTime(), (new Date(rangeEnd)).getTime()); + date = new Date(date).getTime(); + return ( + date < Math.max(new Date(rangeStart).getTime(), new Date(rangeEnd).getTime()) && + date > Math.min(new Date(rangeStart).getTime(), new Date(rangeEnd).getTime()) + ); } ensureRangeValueOrder(dateRange: Date[], initTime = false) { @@ -358,9 +378,9 @@ export class SingleDateRangePickerComponent extends SingleDatepickerComponent im dateRange[0] = new Date(dateRange[0].setHours(23, 59, 59)); dateRange[1] = new Date(dateRange[1].setHours(0, 0, 0)); } - if (dateRange.every(day => !!day)) { + if (dateRange.every((day) => !!day)) { dateRange.sort((a, b) => { - return (new Date(a)).getTime() - (new Date(b).getTime()); + return new Date(a).getTime() - new Date(b).getTime(); }); } else { if (!dateRange[0]) { @@ -390,7 +410,7 @@ export class SingleDateRangePickerComponent extends SingleDatepickerComponent im if (this.hasNextMonth() || invocation === 'init') { let maxDateInRange; if (invocation === 'init') { - maxDateInRange = this.selectedRange.reduce((start, end) => new Date(end) > new Date(start) ? end : start); + maxDateInRange = this.selectedRange.reduce((start, end) => (new Date(end) > new Date(start) ? end : start)); } super.onNextMonth(maxDateInRange, 'init'); this.notifyCalenderChange(); @@ -434,15 +454,18 @@ export class SingleDateRangePickerComponent extends SingleDatepickerComponent im if (!this.isAuxiliary) { hasPrevYear = this.nowMinYear > this.minDate.getFullYear(); } else { - hasPrevYear = this.nowMinYear > this.minDate.getFullYear() && - this.isBeforeMoreThanOneYear(this.currentCalendars[0], {year: this.nowMinYear, month: this.currentCalendars[1].month}); + hasPrevYear = + this.nowMinYear > this.minDate.getFullYear() && + this.isBeforeMoreThanOneYear(this.currentCalendars[0], { year: this.nowMinYear, month: this.currentCalendars[1].month }); } } else if (this.currentCalendars[0] && this.currentCalendars[1]) { // 主面板只用考虑minDate的影响 if (!this.isAuxiliary) { hasPrevYear = this.currentCalendars[0].year > this.minDate.getFullYear(); - } else { // 副面板同时考虑minDate和日历的影响 - hasPrevYear = this.currentCalendars[1].year > this.minDate.getFullYear() && + } else { + // 副面板同时考虑minDate和日历的影响 + hasPrevYear = + this.currentCalendars[1].year > this.minDate.getFullYear() && this.isBeforeMoreThanOneYear(this.currentCalendars[0], this.currentCalendars[1]); } } @@ -455,15 +478,18 @@ export class SingleDateRangePickerComponent extends SingleDatepickerComponent im if (this.isAuxiliary) { hasNextYear = this.nowMaxYear < this.maxDate.getFullYear(); } else { - hasNextYear = this.nowMaxYear < this.maxDate.getFullYear() && - this.isAfterMoreThanOneYear(this.currentCalendars[1], {year: this.nowMaxYear, month: this.currentCalendars[0].month}); + hasNextYear = + this.nowMaxYear < this.maxDate.getFullYear() && + this.isAfterMoreThanOneYear(this.currentCalendars[1], { year: this.nowMaxYear, month: this.currentCalendars[0].month }); } } else if (this.currentCalendars[0] && this.currentCalendars[1]) { // 副面板只用考虑maxDate的影响 if (this.isAuxiliary) { hasNextYear = this.currentCalendars[1].year < this.maxDate.getFullYear(); - } else { // 主面板同时考虑maxDate和日历的影响 - hasNextYear = this.currentCalendars[0].year < this.maxDate.getFullYear() && + } else { + // 主面板同时考虑maxDate和日历的影响 + hasNextYear = + this.currentCalendars[0].year < this.maxDate.getFullYear() && this.isAfterMoreThanOneYear(this.currentCalendars[1], this.currentCalendars[0]); } } @@ -473,26 +499,31 @@ export class SingleDateRangePickerComponent extends SingleDatepickerComponent im isYearDisable(year: number): boolean { if (this.isAuxiliary) { // 先判定主面板是否比附面板小一年以上，是的话disabled为false; - return !(this.isBeforeMoreThanOneYear(this.currentCalendars[0], { year: year + 1, month: this.currentCalendars[1].month}) || + return !( + this.isBeforeMoreThanOneYear(this.currentCalendars[0], { year: year + 1, month: this.currentCalendars[1].month }) || // 主附面板在同一年时，判断主附面板月是否在临界值； - (this.currentCalendars[0].year === year && this.currentCalendars[0].month !== 11)); + (this.currentCalendars[0].year === year && this.currentCalendars[0].month !== 11) + ); } else { - return !(this.isAfterMoreThanOneYear(this.currentCalendars[1], {year: year - 1, month: this.currentCalendars[0].month}) || - (this.currentCalendars[1].year === year && this.currentCalendars[1].month !== 0)); + return !( + this.isAfterMoreThanOneYear(this.currentCalendars[1], { year: year - 1, month: this.currentCalendars[0].month }) || + (this.currentCalendars[1].year === year && this.currentCalendars[1].month !== 0) + ); } } isMonthDisable(month: string): boolean { if (this.isAuxiliary) { - return !this.isBeforeMoreThanOneMonth( - this.currentCalendars[0], {year: this.currentCalendars[1].year, month: parseInt(month, 10) - 1 + 1} - ); + return !this.isBeforeMoreThanOneMonth(this.currentCalendars[0], { + year: this.currentCalendars[1].year, + month: parseInt(month, 10) - 1 + 1, + }); } else { - return !this.isAfterMoreThanOneMonth( - this.currentCalendars[1], {year: this.currentCalendars[0].year, month: parseInt(month, 10) - 1 - 1} - ); + return !this.isAfterMoreThanOneMonth(this.currentCalendars[1], { + year: this.currentCalendars[0].year, + month: parseInt(month, 10) - 1 - 1, + }); } - } onPreYear() { @@ -541,7 +572,9 @@ export class SingleDateRangePickerComponent extends SingleDatepickerComponent im this.onDisplayWeeksChange(); this.openChooseMonth = false; - this.isAuxiliary ? this.currentCalendars[1].month = this.currentMonthIndex : this.currentCalendars[0].month = this.currentMonthIndex; + this.isAuxiliary + ? (this.currentCalendars[1].month = this.currentMonthIndex) + : (this.currentCalendars[0].month = this.currentMonthIndex); } onSelectYear(year, $event?: Event) { @@ -558,7 +591,7 @@ export class SingleDateRangePickerComponent extends SingleDatepickerComponent im this.availableMonths = this.onDisplayMonthsChange(); this.openChooseYear = false; if (!$event) { - this.isAuxiliary ? this.currentCalendars[1].year = this.currentYear : this.currentCalendars[0].year = this.currentYear; + this.isAuxiliary ? (this.currentCalendars[1].year = this.currentYear) : (this.currentCalendars[0].year = this.currentYear); return; } this.openChooseMonth = true; @@ -614,13 +647,13 @@ export class SingleDateRangePickerComponent extends SingleDatepickerComponent im } // 处理A日期比B日期大1年同时A日期月份小于B日期月份的情况 - return (!(dateA.year - dateB.year === 1 && dateA.month <= dateB.month)); + return !(dateA.year - dateB.year === 1 && dateA.month <= dateB.month); } protected notifyCalenderChange() { this.syncPickerPair.emit({ year: this.currentYear, - month: this.currentMonthIndex + month: this.currentMonthIndex, }); } @@ -629,7 +662,7 @@ export class SingleDateRangePickerComponent extends SingleDatepickerComponent im } private setTime(date: any) { - return (new Date(date.setHours(this.currentHour, this.currentMinute, this.currentSecond))); + return new Date(date.setHours(this.currentHour, this.currentMinute, this.currentSecond)); } protected onSelectDateChanged() { @@ -643,7 +676,9 @@ export class SingleDateRangePickerComponent extends SingleDatepickerComponent im this.selectedDate = this.selectedDate || date; this.currentYear = date.getFullYear(); this.currentMonthIndex = date.getMonth(); - if (!this.showTime) { return; } + if (!this.showTime) { + return; + } switch (this.isAuxiliary) { case false: // Left panel @@ -657,14 +692,15 @@ export class SingleDateRangePickerComponent extends SingleDatepickerComponent im this.currentMinute = this.rangeEnd ? this.rangeEnd.getMinutes() : 59; this.currentSecond = this.rangeEnd ? this.rangeEnd.getSeconds() : 59; break; + default: } } - get currentTime () { + get currentTime() { return { hour: this.currentHour, minute: this.currentMinute, - second: this.currentSecond + second: this.currentSecond, }; } } diff --git a/devui/datepicker/two-datepicker/two-datepicker-single.component.ts b/devui/datepicker/two-datepicker/two-datepicker-single.component.ts index b07813e4..9956d43f 100644 --- a/devui/datepicker/two-datepicker/two-datepicker-single.component.ts +++ b/devui/datepicker/two-datepicker/two-datepicker-single.component.ts @@ -9,7 +9,7 @@ import { OnInit, Output, Renderer2, - SimpleChanges + SimpleChanges, } from '@angular/core'; import { NG_VALUE_ACCESSOR } from '@angular/forms'; import { I18nService } from 'ng-devui/i18n'; @@ -27,10 +27,9 @@ import { SimpleDate } from '../single-date-range-picker.component'; provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => TwoDatepickerSingleComponent), multi: true, - } - ] + }, + ], }) - export class TwoDatepickerSingleComponent extends SingleDatepickerComponent implements OnChanges, OnInit { @Input() selectedRange: Date[] = Array(2); @Input() rangePicker = false; @@ -71,7 +70,6 @@ export class TwoDatepickerSingleComponent extends SingleDatepickerComponent impl this.initDatePicker(); this.onNextMonth('init'); this.selectedDate = new Date(this.currentYear, this.currentMonthIndex); - } else if (!this.isAuxiliary && this.rangeStart) { // 主面板，已选择开始日期的情况 this.selectedDate = this.rangeStart; @@ -85,13 +83,12 @@ export class TwoDatepickerSingleComponent extends SingleDatepickerComponent impl this.selectedDate = this.rangeEnd; super.ngOnInit(); // 处理选择的日期范围开始和结束在同一个月的情况 - if (rangeStart && rangeEnd && rangeStart.getFullYear() === rangeEnd.getFullYear() && - rangeStart.getMonth() === rangeEnd.getMonth()) { + if (rangeStart && rangeEnd && rangeStart.getFullYear() === rangeEnd.getFullYear() && rangeStart.getMonth() === rangeEnd.getMonth()) { this.onNextMonth('init'); } this.selectedDate = new Date(this.currentYear, this.currentMonthIndex); } - if (!this.selectedRange.every(curDate => !!curDate)) { + if (!this.selectedRange.every((curDate) => !!curDate)) { this.selectingRange = true; } this.availableMonths = this.onDisplayMonthsChange(); @@ -99,8 +96,8 @@ export class TwoDatepickerSingleComponent extends SingleDatepickerComponent impl } /* - ** @param invocation:调用时机 - */ + ** @param invocation:调用时机 + */ onSelectDate($event, date, invocation?: any) { if ($event.stopPropagation) { $event.stopPropagation(); @@ -146,7 +143,7 @@ export class TwoDatepickerSingleComponent extends SingleDatepickerComponent impl this.rangeSelecting.emit(this.rangeStart); } } else if (this.whichOpen === 'end') { - if (this.rangeStart && this.rangeEnd || (!this.rangeStart && !this.rangeEnd)) { + if ((this.rangeStart && this.rangeEnd) || (!this.rangeStart && !this.rangeEnd)) { this.selectingRange = false; } else { this.selectingRange = true; @@ -178,7 +175,7 @@ export class TwoDatepickerSingleComponent extends SingleDatepickerComponent impl this.onChange(selectedRange); this.rangeSelected.emit({ reason: SelectDateRangeChangeReason.date, - selectedRange: selectedRange + selectedRange: selectedRange, }); } @@ -187,7 +184,7 @@ export class TwoDatepickerSingleComponent extends SingleDatepickerComponent impl if (this.selectingRange) { rangeSource = [this.rangeStart || this.rangeEnd, this.previewEnd]; } - if ((!Array.isArray(rangeSource))) { + if (!Array.isArray(rangeSource)) { return; } return rangeSource.some((selectedDate) => { @@ -203,11 +200,9 @@ export class TwoDatepickerSingleComponent extends SingleDatepickerComponent impl } isBetweenDay(date) { - if (Array.isArray(this.selectedRange) && this.selectedRange.every(day => !!day)) { - const index = this.selectedRange.findIndex(day => { - return date.getFullYear() === day.getFullYear() && - date.getMonth() === day.getMonth() && - date.getDate() === day.getDate(); + if (Array.isArray(this.selectedRange) && this.selectedRange.every((day) => !!day)) { + const index = this.selectedRange.findIndex((day) => { + return date.getFullYear() === day.getFullYear() && date.getMonth() === day.getMonth() && date.getDate() === day.getDate(); }); return ['devui-day-start', 'devui-day-end'][index]; } else { @@ -217,14 +212,15 @@ export class TwoDatepickerSingleComponent extends SingleDatepickerComponent impl ngOnChanges(changes: SimpleChanges) { if (Object.prototype.hasOwnProperty.call(changes, 'selectedRange')) { - [this.rangeStart, this.rangeEnd] = changes['selectedRange'].currentValue; + [this.rangeStart, this.rangeEnd] = changes.selectedRange.currentValue; if (this.rangeStart && this.rangeEnd) { this.selectingRange = false; } } } - isInRange(date) { + isInRange(dateParam) { + let date = dateParam; let rangeStart = this.rangeStart; let rangeEnd = this.rangeEnd; if (this.selectingRange) { @@ -234,13 +230,15 @@ export class TwoDatepickerSingleComponent extends SingleDatepickerComponent impl rangeEnd = this.previewEnd; } } - date = (new Date(date)).getTime(); - return date < Math.max((new Date(rangeStart)).getTime(), (new Date(rangeEnd)).getTime()) - && date > Math.min((new Date(rangeStart)).getTime(), (new Date(rangeEnd)).getTime()); + date = new Date(date).getTime(); + return ( + date < Math.max(new Date(rangeStart).getTime(), new Date(rangeEnd).getTime()) && + date > Math.min(new Date(rangeStart).getTime(), new Date(rangeEnd).getTime()) + ); } ensureRangeValueOrder(dateRange) { - if (Array.isArray(dateRange) && dateRange.length === 2 && dateRange.every(curDate => !!curDate)) { + if (Array.isArray(dateRange) && dateRange.length === 2 && dateRange.every((curDate) => !!curDate)) { if (dateRange[0].getTime() > dateRange[1].getTime()) { if (this.whichOpen === 'start') { return [dateRange[0], null]; @@ -256,7 +254,7 @@ export class TwoDatepickerSingleComponent extends SingleDatepickerComponent impl if (this.hasNextMonth() || invocation === 'init') { let maxDateInRange; if (invocation === 'init') { - maxDateInRange = this.selectedRange.reduce((start, end) => new Date(end) > new Date(start) ? end : start); + maxDateInRange = this.selectedRange.reduce((start, end) => (new Date(end) > new Date(start) ? end : start)); } super.onNextMonth(maxDateInRange, 'init'); this.notifyCalenderChange(); @@ -300,15 +298,18 @@ export class TwoDatepickerSingleComponent extends SingleDatepickerComponent impl if (!this.isAuxiliary) { hasPrevYear = this.nowMinYear > this.minDate.getFullYear(); } else { - hasPrevYear = this.nowMinYear > this.minDate.getFullYear() && - this.isBeforeMoreThanOneYear(this.currentCalendars[0], {year: this.nowMinYear, month: this.currentCalendars[1].month}); + hasPrevYear = + this.nowMinYear > this.minDate.getFullYear() && + this.isBeforeMoreThanOneYear(this.currentCalendars[0], { year: this.nowMinYear, month: this.currentCalendars[1].month }); } } else if (this.currentCalendars[0] && this.currentCalendars[1]) { // 主面板只用考虑minDate的影响 if (!this.isAuxiliary) { hasPrevYear = this.currentCalendars[0].year > this.minDate.getFullYear(); - } else { // 副面板同时考虑minDate和日历的影响 - hasPrevYear = this.currentCalendars[1].year > this.minDate.getFullYear() && + } else { + // 副面板同时考虑minDate和日历的影响 + hasPrevYear = + this.currentCalendars[1].year > this.minDate.getFullYear() && this.isBeforeMoreThanOneYear(this.currentCalendars[0], this.currentCalendars[1]); } } @@ -321,15 +322,18 @@ export class TwoDatepickerSingleComponent extends SingleDatepickerComponent impl if (this.isAuxiliary) { hasNextYear = this.nowMaxYear < this.maxDate.getFullYear(); } else { - hasNextYear = this.nowMaxYear < this.maxDate.getFullYear() && - this.isAfterMoreThanOneYear(this.currentCalendars[1], {year: this.nowMaxYear, month: this.currentCalendars[0].month}); + hasNextYear = + this.nowMaxYear < this.maxDate.getFullYear() && + this.isAfterMoreThanOneYear(this.currentCalendars[1], { year: this.nowMaxYear, month: this.currentCalendars[0].month }); } } else if (this.currentCalendars[0] && this.currentCalendars[1]) { // 副面板只用考虑maxDate的影响 if (this.isAuxiliary) { hasNextYear = this.currentCalendars[1].year < this.maxDate.getFullYear(); - } else { // 主面板同时考虑maxDate和日历的影响 - hasNextYear = this.currentCalendars[0].year < this.maxDate.getFullYear() && + } else { + // 主面板同时考虑maxDate和日历的影响 + hasNextYear = + this.currentCalendars[0].year < this.maxDate.getFullYear() && this.isAfterMoreThanOneYear(this.currentCalendars[1], this.currentCalendars[0]); } } @@ -415,32 +419,37 @@ export class TwoDatepickerSingleComponent extends SingleDatepickerComponent impl } // 处理A日期比B日期大1年同时A日期月份小于B日期月份的情况 - return (!(dateA.year - dateB.year === 1 && dateA.month <= dateB.month)); + return !(dateA.year - dateB.year === 1 && dateA.month <= dateB.month); } isYearDisable(year: number): boolean { if (this.isAuxiliary) { // 先判定主面板是否比附面板小一年以上，是的话disabled为false; - return !(this.isBeforeMoreThanOneYear(this.currentCalendars[0], { year: year + 1, month: this.currentCalendars[1].month}) || + return !( + this.isBeforeMoreThanOneYear(this.currentCalendars[0], { year: year + 1, month: this.currentCalendars[1].month }) || // 主附面板在同一年时，判断主附面板月是否在临界值； - (this.currentCalendars[0].year === year && this.currentCalendars[0].month !== 11)); + (this.currentCalendars[0].year === year && this.currentCalendars[0].month !== 11) + ); } else { - return !(this.isAfterMoreThanOneYear(this.currentCalendars[1], {year: year - 1, month: this.currentCalendars[0].month}) || - (this.currentCalendars[1].year === year && this.currentCalendars[1].month !== 0)); + return !( + this.isAfterMoreThanOneYear(this.currentCalendars[1], { year: year - 1, month: this.currentCalendars[0].month }) || + (this.currentCalendars[1].year === year && this.currentCalendars[1].month !== 0) + ); } } isMonthDisable(month: string): boolean { if (this.isAuxiliary) { - return !this.isBeforeMoreThanOneMonth( - this.currentCalendars[0], {year: this.currentCalendars[1].year, month: parseInt(month, 10) - 1 + 1} - ); + return !this.isBeforeMoreThanOneMonth(this.currentCalendars[0], { + year: this.currentCalendars[1].year, + month: parseInt(month, 10) - 1 + 1, + }); } else { - return !this.isAfterMoreThanOneMonth( - this.currentCalendars[1], {year: this.currentCalendars[0].year, month: parseInt(month, 10) - 1 - 1} - ); + return !this.isAfterMoreThanOneMonth(this.currentCalendars[1], { + year: this.currentCalendars[0].year, + month: parseInt(month, 10) - 1 - 1, + }); } - } onSelectMonth(month) { @@ -450,7 +459,9 @@ export class TwoDatepickerSingleComponent extends SingleDatepickerComponent impl this.currentMonthIndex = month.index; this.onDisplayWeeksChange(); this.openChooseMonth = false; - this.isAuxiliary ? this.currentCalendars[1].month = this.currentMonthIndex : this.currentCalendars[0].month = this.currentMonthIndex; + this.isAuxiliary + ? (this.currentCalendars[1].month = this.currentMonthIndex) + : (this.currentCalendars[0].month = this.currentMonthIndex); } onSelectYear(year, $event?: Event) { @@ -467,7 +478,7 @@ export class TwoDatepickerSingleComponent extends SingleDatepickerComponent impl this.availableMonths = this.onDisplayMonthsChange(); this.openChooseYear = false; if (!$event) { - this.isAuxiliary ? this.currentCalendars[1].year = this.currentYear : this.currentCalendars[0].year = this.currentYear; + this.isAuxiliary ? (this.currentCalendars[1].year = this.currentYear) : (this.currentCalendars[0].year = this.currentYear); return; } this.openChooseMonth = true; @@ -485,7 +496,7 @@ export class TwoDatepickerSingleComponent extends SingleDatepickerComponent impl protected notifyCalenderChange() { this.syncPickerPair.emit({ year: this.currentYear, - month: this.currentMonthIndex + month: this.currentMonthIndex, }); } diff --git a/devui/datepicker/two-datepicker/two-datepicker.component.ts b/devui/datepicker/two-datepicker/two-datepicker.component.ts index 0b90dc58..5475bd8d 100644 --- a/devui/datepicker/two-datepicker/two-datepicker.component.ts +++ b/devui/datepicker/two-datepicker/two-datepicker.component.ts @@ -11,10 +11,10 @@ import { OnInit, Output, TemplateRef, - ViewChild + ViewChild, } from '@angular/core'; import { I18nInterface, I18nService } from 'ng-devui/i18n'; -import { DateConverter, DefaultDateConverter, DevConfigService, fadeInOut, WithConfig } from 'ng-devui/utils'; +import { DateConverter, DefaultDateConverter, DevConfigService, WithConfig, fadeInOut } from 'ng-devui/utils'; import { Subject, Subscription } from 'rxjs'; import { distinctUntilChanged } from 'rxjs/operators'; import { DatePickerConfigService as DatePickerConfig } from '../date-picker.config.service'; @@ -25,9 +25,7 @@ import { DatePickerConfigService as DatePickerConfig } from '../date-picker.conf exportAs: 'twoDatePicker', templateUrl: 'two-datepicker.component.html', styleUrls: ['./two-datepicker.component.scss'], - animations: [ - fadeInOut - ] + animations: [fadeInOut], }) export class TwoDatePickerComponent implements OnInit, OnDestroy { @Input() locale: string; @@ -45,9 +43,9 @@ export class TwoDatePickerComponent implements OnInit, OnDestroy { @ViewChild('templateWrap') templateWrap: ElementRef; datePosition: VerticalConnectionPos = 'bottom'; - selectDateSubject = new Subject<{side: string; date: Date; onlyWrite?: boolean}>(); + selectDateSubject = new Subject<{ side: string; date: Date; onlyWrite?: boolean }>(); hoverOnDate: Subject = new Subject(); - switchOriginPositionSub: Subject<'start'|'end'|false> = new Subject<'start'|'end'|false>(); + switchOriginPositionSub: Subject<'start' | 'end' | false> = new Subject<'start' | 'end' | false>(); today = new Date(); rangeStart; rangeEnd; @@ -60,7 +58,7 @@ export class TwoDatePickerComponent implements OnInit, OnDestroy { public currentCalendars = [null, null]; public cdkConnectedOverlayOrigin: CdkOverlayOrigin; private _isOpen = false; - private _whichOpen: 'start'|'end'|false; + private _whichOpen: 'start' | 'end' | false; private _dateConfig: any; private _dateFormat: string; private _maxDate: Date; @@ -103,7 +101,7 @@ export class TwoDatePickerComponent implements OnInit, OnDestroy { get minDate() { return this._minDate; } - set whichOpen(side: 'start'|'end'|false) { + set whichOpen(side: 'start' | 'end' | false) { this._whichOpen = side; this.switchOriginPositionSub.next(side); } @@ -135,15 +133,17 @@ export class TwoDatePickerComponent implements OnInit, OnDestroy { private devConfigService: DevConfigService, @Inject(DOCUMENT) private doc: any ) { - this._dateConfig = datePickerConfig['dateConfig']; - this.dateConverter = datePickerConfig['dateConfig'].dateConverter || new DefaultDateConverter(); + this._dateConfig = datePickerConfig.dateConfig; + this.dateConverter = datePickerConfig.dateConfig.dateConverter || new DefaultDateConverter(); this.setI18nText(); this.document = this.doc; } checkDateConfig(dateConfig: any) { - if (!dateConfig) { return false; } - if (typeof(dateConfig.timePicker) !== 'boolean' || !dateConfig.max || !dateConfig.min || !dateConfig.format) { + if (!dateConfig) { + return false; + } + if (typeof dateConfig.timePicker !== 'boolean' || !dateConfig.max || !dateConfig.min || !dateConfig.format) { return false; } return true; @@ -165,26 +165,29 @@ export class TwoDatePickerComponent implements OnInit, OnDestroy { } isDisableToday() { - if ((this.minDate.getTime() >= (this.today).getTime()) || (this.maxDate.getTime() <= (this.today).getTime())) { + if (this.minDate.getTime() >= this.today.getTime() || this.maxDate.getTime() <= this.today.getTime()) { this.disableToday = true; } else { this.disableToday = false; } } - toggle = (side: 'start'|'end' = 'start') => { + toggle = (side: 'start' | 'end' = 'start') => { if (this.isOpen) { if (side === 'start') { if (this.whichOpen === 'start') { this.whichOpen = false; this.isOpen = false; - } else { // this.whichOpen === 'end' + } else { + // this.whichOpen === 'end' this.whichOpen = 'start'; } - } else { // side === 'end' + } else { + // side === 'end' if (this.whichOpen === 'start') { this.whichOpen = 'end'; - } else { // this.whichOpen === 'end' + } else { + // this.whichOpen === 'end' this.whichOpen = false; this.isOpen = false; } @@ -203,18 +206,18 @@ export class TwoDatePickerComponent implements OnInit, OnDestroy { break; case 'bottom': this.datePosition = 'top'; + break; + default: } this.switchOriginPositionSub.next(this.whichOpen); } convertDate(date) { - return date ? - this.dateConverter.parse(date, this.dateFormat) : null; + return date ? this.dateConverter.parse(date, this.dateFormat) : null; } formatDate(date) { - return date ? - this.dateConverter.format(date, this.dateFormat, this.locale || this.i18nLocale) : null; + return date ? this.dateConverter.format(date, this.dateFormat, this.locale || this.i18nLocale) : null; } updateCdkConnectedOverlayOrigin(el: ElementRef) { @@ -233,13 +236,14 @@ export class TwoDatePickerComponent implements OnInit, OnDestroy { case 'right': this.currentCalendars[1] = currentCalender; break; + default: } } rangeChange(data) { this.chooseDate(data.selectedRange); - this.selectDateSubject.next({side: 'start', date: this.rangeStart, onlyWrite: true}); - this.selectDateSubject.next({side: 'end', date: this.rangeEnd, onlyWrite: true}); + this.selectDateSubject.next({ side: 'start', date: this.rangeStart, onlyWrite: true }); + this.selectDateSubject.next({ side: 'end', date: this.rangeEnd, onlyWrite: true }); } chooseDate = (range) => { @@ -259,22 +263,21 @@ export class TwoDatePickerComponent implements OnInit, OnDestroy { } subscribeHoverActions() { - this.hoverOnDate.pipe( - distinctUntilChanged() - ).subscribe((date) => { + this.hoverOnDate.pipe(distinctUntilChanged()).subscribe((date) => { this.previewRangeEnd(date); }); } previewRangeEnd(date) { - this.leftPicker['previewEnd'] = date; - this.rightPicker['previewEnd'] = date; + (this.leftPicker as any).previewEnd = date; + (this.rightPicker as any).previewEnd = date; } syncRangeStart(rangeStart, picker: any) { if (this.whichOpen === 'end') { this.selectEnd(rangeStart); - } else { // this.whichOpen === 'start' + } else { + // this.whichOpen === 'start' this.selectStart(rangeStart); } picker.selectRange(rangeStart, true); @@ -285,7 +288,7 @@ export class TwoDatePickerComponent implements OnInit, OnDestroy { this.rangeStart = date; this.isDisableToday(); if (!passive) { - this.selectDateSubject.next({side: 'start', date}); + this.selectDateSubject.next({ side: 'start', date }); this.whichOpen = 'end'; } } @@ -295,7 +298,7 @@ export class TwoDatePickerComponent implements OnInit, OnDestroy { this.rangeEnd = date; this.isDisableToday(); if (!passive) { - this.selectDateSubject.next({side: 'end', date: date}); + this.selectDateSubject.next({ side: 'end', date: date }); if (!this.showTime && this.hideOnRangeSelected) { this.isOpen = false; this.whichOpen = false; @@ -306,7 +309,7 @@ export class TwoDatePickerComponent implements OnInit, OnDestroy { chooseToday(event) { event.preventDefault(); event.stopPropagation(); - if ((this.minDate.getTime() <= (this.today).getTime()) && (this.maxDate.getTime() >= (this.today).getTime())) { + if (this.minDate.getTime() <= this.today.getTime() && this.maxDate.getTime() >= this.today.getTime()) { if (this.whichOpen === 'start') { this.selectStart(this.today); } else if (this.whichOpen === 'end') { @@ -324,7 +327,7 @@ export class TwoDatePickerComponent implements OnInit, OnDestroy { } } - clear = (side: 'start'|'end') => { + clear = (side: 'start' | 'end') => { if (this.disabled) { return; } diff --git a/devui/design-token/animation/demo/animation/animation.component.ts b/devui/design-token/animation/demo/animation/animation.component.ts index f0af4dd8..fff5cbae 100644 --- a/devui/design-token/animation/demo/animation/animation.component.ts +++ b/devui/design-token/animation/demo/animation/animation.component.ts @@ -13,12 +13,13 @@ export class AnimationComponent implements OnInit, OnDestroy { animation = []; i18nText: any; - constructor(private translate: TranslateService) { this.setI18n(); } - + constructor(private translate: TranslateService) { + this.setI18n(); + } ngOnInit() { if (typeof window !== undefined) { - this.themeService = window['devuiThemeService']; + this.themeService = (window as any).devuiThemeService; this.changeValueInTable(); if (this.themeService.eventBus) { this.themeService.eventBus.add('themeChanged', this.changeValueInTable); @@ -34,7 +35,7 @@ export class AnimationComponent implements OnInit, OnDestroy { const obj = { name: '$' + key, value: theme.data[key], - description: this.i18nText ? this.i18nText[key] : '' + description: this.i18nText ? this.i18nText[key] : '', }; this.animation.push(obj); } @@ -44,14 +45,14 @@ export class AnimationComponent implements OnInit, OnDestroy { setI18n() { this.subs.add( this.translate.get('components.design-animation.AnimationDemo.instance').subscribe((res) => { - this.i18nText = res['animation']; + this.i18nText = res.animation; }) ); this.subs.add( this.translate.onLangChange.subscribe((event: TranslationChangeEvent) => { const values = this.translate.instant('components.design-animation.AnimationDemo.instance'); - this.i18nText = values['animation']; + this.i18nText = values.animation; }) ); } diff --git a/devui/design-token/animation/demo/design-animation-demo.component.ts b/devui/design-token/animation/demo/design-animation-demo.component.ts index 79764822..5a1a38a0 100644 --- a/devui/design-token/animation/demo/design-animation-demo.component.ts +++ b/devui/design-token/animation/demo/design-animation-demo.component.ts @@ -4,11 +4,12 @@ import { Subscription } from 'rxjs'; @Component({ selector: 'd-design-animation-demo', - templateUrl: './design-animation-demo.component.html' + templateUrl: './design-animation-demo.component.html', }) export class DesignAnimationDemoComponent implements OnInit, OnDestroy { navItems = []; subs: Subscription = new Subscription(); + constructor(private translate: TranslateService) {} ngOnInit() { @@ -27,9 +28,7 @@ export class DesignAnimationDemoComponent implements OnInit, OnDestroy { } setNavValues(values) { - this.navItems = [ - { dAnchorLink: 'animation', value: values['animation'] } - ]; + this.navItems = [{ dAnchorLink: 'animation', value: values.animation }]; } ngOnDestroy() { @@ -37,5 +36,4 @@ export class DesignAnimationDemoComponent implements OnInit, OnDestroy { this.subs.unsubscribe(); } } - } diff --git a/devui/design-token/border-radius/demo/border-radius/border-radius.component.ts b/devui/design-token/border-radius/demo/border-radius/border-radius.component.ts index add247fa..f3812e86 100644 --- a/devui/design-token/border-radius/demo/border-radius/border-radius.component.ts +++ b/devui/design-token/border-radius/demo/border-radius/border-radius.component.ts @@ -13,11 +13,13 @@ export class BorderRadiusComponent implements OnInit, OnDestroy { borderRadius = []; i18nText: any; - constructor(private translate: TranslateService) { this.setI18n(); } + constructor(private translate: TranslateService) { + this.setI18n(); + } ngOnInit() { if (typeof window !== undefined) { - this.themeService = window['devuiThemeService']; + this.themeService = (window as any).devuiThemeService; this.changeValueInTable(); if (this.themeService.eventBus) { this.themeService.eventBus.add('themeChanged', this.changeValueInTable); @@ -33,7 +35,7 @@ export class BorderRadiusComponent implements OnInit, OnDestroy { const obj = { name: '$' + key, value: theme.data[key], - description: this.i18nText ? this.i18nText[key] : '' + description: this.i18nText ? this.i18nText[key] : '', }; this.borderRadius.push(obj); } @@ -43,14 +45,14 @@ export class BorderRadiusComponent implements OnInit, OnDestroy { setI18n() { this.subs.add( this.translate.get('components.design-border-radius.cornerDemo.instance').subscribe((res) => { - this.i18nText = res['borderRadius']; + this.i18nText = res.borderRadius; }) ); this.subs.add( this.translate.onLangChange.subscribe((event: TranslationChangeEvent) => { const values = this.translate.instant('components.design-border-radius.cornerDemo.instance'); - this.i18nText = values['borderRadius']; + this.i18nText = values.borderRadius; }) ); } diff --git a/devui/design-token/color/demo/color/color.component.scss b/devui/design-token/color/demo/color/color.component.scss index 668ea2ee..2c291992 100644 --- a/devui/design-token/color/demo/color/color.component.scss +++ b/devui/design-token/color/demo/color/color.component.scss @@ -132,7 +132,6 @@ $colorMap: ( '$devui-blue-60': $devui-blue-60, '$devui-blue-70': $devui-blue-70, '$devui-blue-80': $devui-blue-80, - '$devui-blue-90': $devui-blue-90, '$devui-blue-100': $devui-blue-100, '$devui-sky-5': $devui-sky-5, '$devui-sky-10': $devui-sky-10, @@ -143,7 +142,6 @@ $colorMap: ( '$devui-sky-60': $devui-sky-60, '$devui-sky-70': $devui-sky-70, '$devui-sky-80': $devui-sky-80, - '$devui-sky-90': $devui-sky-90, '$devui-sky-100': $devui-sky-100, '$devui-green-5': $devui-green-5, '$devui-green-10': $devui-green-10, @@ -154,7 +152,6 @@ $colorMap: ( '$devui-green-60': $devui-green-60, '$devui-green-70': $devui-green-70, '$devui-green-80': $devui-green-80, - '$devui-green-90': $devui-green-90, '$devui-green-100': $devui-green-100, '$devui-lime-5': $devui-lime-5, '$devui-lime-10': $devui-lime-10, @@ -165,7 +162,6 @@ $colorMap: ( '$devui-lime-60': $devui-lime-60, '$devui-lime-70': $devui-lime-70, '$devui-lime-80': $devui-lime-80, - '$devui-lime-90': $devui-lime-90, '$devui-lime-100': $devui-lime-100, '$devui-yellow-5': $devui-yellow-5, '$devui-yellow-10': $devui-yellow-10, @@ -176,7 +172,6 @@ $colorMap: ( '$devui-yellow-60': $devui-yellow-60, '$devui-yellow-70': $devui-yellow-70, '$devui-yellow-80': $devui-yellow-80, - '$devui-yellow-90': $devui-yellow-90, '$devui-yellow-100': $devui-yellow-100, '$devui-orange-5': $devui-orange-5, '$devui-orange-10': $devui-orange-10, @@ -187,7 +182,6 @@ $colorMap: ( '$devui-orange-60': $devui-orange-60, '$devui-orange-70': $devui-orange-70, '$devui-orange-80': $devui-orange-80, - '$devui-orange-90': $devui-orange-90, '$devui-orange-100': $devui-orange-100, '$devui-red-5': $devui-red-5, '$devui-red-10': $devui-red-10, @@ -198,7 +192,6 @@ $colorMap: ( '$devui-red-60': $devui-red-60, '$devui-red-70': $devui-red-70, '$devui-red-80': $devui-red-80, - '$devui-red-90': $devui-red-90, '$devui-red-100': $devui-red-100, '$devui-magenta-5': $devui-magenta-5, '$devui-magenta-10': $devui-magenta-10, @@ -209,7 +202,6 @@ $colorMap: ( '$devui-magenta-60': $devui-magenta-60, '$devui-magenta-70': $devui-magenta-70, '$devui-magenta-80': $devui-magenta-80, - '$devui-magenta-90': $devui-magenta-90, '$devui-magenta-100': $devui-magenta-100, '$devui-purple-5': $devui-purple-5, '$devui-purple-10': $devui-purple-10, @@ -220,7 +212,6 @@ $colorMap: ( '$devui-purple-60': $devui-purple-60, '$devui-purple-70': $devui-purple-70, '$devui-purple-80': $devui-purple-80, - '$devui-purple-90': $devui-purple-90, '$devui-purple-100': $devui-purple-100, '$devui-gray-5': $devui-gray-5, '$devui-gray-10': $devui-gray-10, diff --git a/devui/design-token/color/demo/color/color.component.ts b/devui/design-token/color/demo/color/color.component.ts index 1e30447c..9be64a40 100644 --- a/devui/design-token/color/demo/color/color.component.ts +++ b/devui/design-token/color/demo/color/color.component.ts @@ -46,7 +46,7 @@ export class ColorComponent implements OnInit, OnDestroy { ngOnInit() { if (typeof window !== undefined) { - this.themeService = window['devuiThemeService']; + this.themeService = (window as any).devuiThemeService; this.changeValueInTable(); if (this.themeService.eventBus) { this.themeService.eventBus.add('themeChanged', this.changeValueInTable); @@ -141,14 +141,14 @@ export class ColorComponent implements OnInit, OnDestroy { setI18n() { this.subs.add( this.translate.get('components.design-color.colorDemo.instance').subscribe((res) => { - this.i18nText = res['colorSource']; + this.i18nText = res.colorSource; }) ); this.subs.add( this.translate.onLangChange.subscribe((event: TranslationChangeEvent) => { const values = this.translate.instant('components.design-color.colorDemo.instance'); - this.i18nText = values['colorSource']; + this.i18nText = values.colorSource; }) ); } diff --git a/devui/design-token/color/demo/design-color-demo.component.ts b/devui/design-token/color/demo/design-color-demo.component.ts index 58383a96..737057fc 100644 --- a/devui/design-token/color/demo/design-color-demo.component.ts +++ b/devui/design-token/color/demo/design-color-demo.component.ts @@ -4,11 +4,12 @@ import { Subscription } from 'rxjs'; @Component({ selector: 'd-design-color-demo', - templateUrl: './design-color-demo.component.html' + templateUrl: './design-color-demo.component.html', }) export class DesignColorDemoComponent implements OnInit, OnDestroy { navItems = []; subs: Subscription = new Subscription(); + constructor(private translate: TranslateService) {} ngOnInit() { @@ -27,9 +28,7 @@ export class DesignColorDemoComponent implements OnInit, OnDestroy { } setNavValues(values) { - this.navItems = [ - { dAnchorLink: 'color', value: values['color'] } - ]; + this.navItems = [{ dAnchorLink: 'color', value: values.color }]; } ngOnDestroy() { @@ -37,5 +36,4 @@ export class DesignColorDemoComponent implements OnInit, OnDestroy { this.subs.unsubscribe(); } } - } diff --git a/devui/design-token/font/demo/design-font-demo.component.ts b/devui/design-token/font/demo/design-font-demo.component.ts index a65c4c30..459dd0a2 100644 --- a/devui/design-token/font/demo/design-font-demo.component.ts +++ b/devui/design-token/font/demo/design-font-demo.component.ts @@ -4,11 +4,12 @@ import { Subscription } from 'rxjs'; @Component({ selector: 'd-design-font-demo', - templateUrl: './design-font-demo.component.html' + templateUrl: './design-font-demo.component.html', }) export class DesignFontDemoComponent implements OnInit, OnDestroy { navItems = []; subs: Subscription = new Subscription(); + constructor(private translate: TranslateService) {} ngOnInit() { @@ -27,9 +28,7 @@ export class DesignFontDemoComponent implements OnInit, OnDestroy { } setNavValues(values) { - this.navItems = [ - { dAnchorLink: 'font', value: values['font'] } - ]; + this.navItems = [{ dAnchorLink: 'font', value: values.font }]; } ngOnDestroy() { @@ -37,5 +36,4 @@ export class DesignFontDemoComponent implements OnInit, OnDestroy { this.subs.unsubscribe(); } } - } diff --git a/devui/design-token/font/demo/font/font.component.ts b/devui/design-token/font/demo/font/font.component.ts index 9f5c34d2..508d1ac4 100644 --- a/devui/design-token/font/demo/font/font.component.ts +++ b/devui/design-token/font/demo/font/font.component.ts @@ -20,11 +20,13 @@ export class FontComponent implements OnInit, OnDestroy { i18nText: any; fontKey = ['devui-font-size', 'devui-font-content-weight', 'devui-line-height']; - constructor(private translate: TranslateService) { this.setI18n(); } + constructor(private translate: TranslateService) { + this.setI18n(); + } ngOnInit() { if (typeof window !== undefined) { - this.themeService = window['devuiThemeService']; + this.themeService = (window as any).devuiThemeService; this.changeValueInTable(); if (this.themeService.eventBus) { this.themeService.eventBus.add('themeChanged', this.changeValueInTable); @@ -36,11 +38,11 @@ export class FontComponent implements OnInit, OnDestroy { this.fonts = []; const theme = this.themeService.currentTheme; for (const key in theme.data) { - if (this.fontKey.some(item => key.includes(item))) { + if (this.fontKey.some((item) => key.includes(item))) { const obj = { name: '$' + key, value: theme.data[key], - description: this.i18nText ? this.i18nText[key] : '' + description: this.i18nText ? this.i18nText[key] : '', }; this.fonts.push(obj); } @@ -50,19 +52,18 @@ export class FontComponent implements OnInit, OnDestroy { setI18n() { this.subs.add( this.translate.get('components.design-font.fontDemo.instance').subscribe((res) => { - this.i18nText = res['fonts']; + this.i18nText = res.fonts; }) ); this.subs.add( this.translate.onLangChange.subscribe((event: TranslationChangeEvent) => { const values = this.translate.instant('components.design-font.fontDemo.instance'); - this.i18nText = values['fonts']; + this.i18nText = values.fonts; }) ); } - ngOnDestroy() { if (this.subs) { this.subs.unsubscribe(); diff --git a/devui/design-token/shadow/demo/design-shadow-demo.component.ts b/devui/design-token/shadow/demo/design-shadow-demo.component.ts index cea3e81d..a4257528 100644 --- a/devui/design-token/shadow/demo/design-shadow-demo.component.ts +++ b/devui/design-token/shadow/demo/design-shadow-demo.component.ts @@ -4,11 +4,12 @@ import { Subscription } from 'rxjs'; @Component({ selector: 'd-design-shadow-demo', - templateUrl: './design-shadow-demo.component.html' + templateUrl: './design-shadow-demo.component.html', }) export class DesignShadowDemoComponent implements OnInit, OnDestroy { navItems = []; subs: Subscription = new Subscription(); + constructor(private translate: TranslateService) {} ngOnInit() { @@ -27,9 +28,7 @@ export class DesignShadowDemoComponent implements OnInit, OnDestroy { } setNavValues(values) { - this.navItems = [ - { dAnchorLink: 'shadow', value: values['shadow'] } - ]; + this.navItems = [{ dAnchorLink: 'shadow', value: values.shadow }]; } ngOnDestroy() { @@ -37,5 +36,4 @@ export class DesignShadowDemoComponent implements OnInit, OnDestroy { this.subs.unsubscribe(); } } - } diff --git a/devui/design-token/shadow/demo/shadow/shadow.component.ts b/devui/design-token/shadow/demo/shadow/shadow.component.ts index b1bd47f1..7e399d83 100644 --- a/devui/design-token/shadow/demo/shadow/shadow.component.ts +++ b/devui/design-token/shadow/demo/shadow/shadow.component.ts @@ -17,16 +17,17 @@ export class ShadowComponent implements OnInit, OnDestroy { shadowColorKey = ['shadow']; i18nText: any; - constructor(private translate: TranslateService) { this.setI18n(); } + constructor(private translate: TranslateService) { + this.setI18n(); + } ngOnInit() { if (typeof window !== undefined) { - this.themeService = window['devuiThemeService']; + this.themeService = (window as any).devuiThemeService; this.changeValueInTable(); if (this.themeService.eventBus) { this.themeService.eventBus.add('themeChanged', this.changeValueInTable); } - } } @@ -36,24 +37,23 @@ export class ShadowComponent implements OnInit, OnDestroy { const theme = this.themeService.currentTheme; for (const key in theme.data) { if (Object.prototype.hasOwnProperty.call(theme.data, key)) { - if (this.shadowKey.some(item => key.includes(item))) { + if (this.shadowKey.some((item) => key.includes(item))) { const obj = { name: '$' + key, value: theme.data[key], - description: this.i18nText ? this.i18nText['shadows'][key] : '' + description: this.i18nText ? this.i18nText.shadows[key] : '', }; this.shadows.push(obj); } - if (this.shadowColorKey.some(item => key.includes(item)) && theme.data[key].startsWith('rgba')) { + if (this.shadowColorKey.some((item) => key.includes(item)) && theme.data[key].startsWith('rgba')) { const obj = { name: '$' + key, value: theme.data[key], - description: this.i18nText ? this.i18nText['shadowColor'][key] : '' + description: this.i18nText ? this.i18nText.shadowColor[key] : '', }; this.shadowColor.push(obj); } } - } }; diff --git a/devui/design-token/z-index/demo/z-index/z-index.component.ts b/devui/design-token/z-index/demo/z-index/z-index.component.ts index 16c870d3..1351e9d5 100644 --- a/devui/design-token/z-index/demo/z-index/z-index.component.ts +++ b/devui/design-token/z-index/demo/z-index/z-index.component.ts @@ -13,31 +13,31 @@ export class ZIndexComponent implements OnInit, OnDestroy { zIndex = []; i18nText: any; - constructor(private translate: TranslateService) { this.setI18n(); } + constructor(private translate: TranslateService) { + this.setI18n(); + } ngOnInit() { if (typeof window !== undefined) { - if (typeof window !== undefined) { - this.themeService = window['devuiThemeService']; + this.themeService = (window as any).devuiThemeService; this.changeValueInTable(); if (this.themeService.eventBus) { this.themeService.eventBus.add('themeChanged', this.changeValueInTable); } - } } } setI18n() { this.subs.add( this.translate.get('components.design-z-index.ZIndexDemo.instance').subscribe((res) => { - this.i18nText = res['zIndex']; + this.i18nText = res.zIndex; }) ); this.subs.add( this.translate.onLangChange.subscribe((event: TranslationChangeEvent) => { const values = this.translate.instant('components.design-z-index.ZIndexDemo.instance'); - this.i18nText = values['zIndex']; + this.i18nText = values.zIndex; }) ); } @@ -49,7 +49,7 @@ export class ZIndexComponent implements OnInit, OnDestroy { const obj = { name: '$' + key, value: theme.data[key], - description: this.i18nText ? this.i18nText[key] : '' + description: this.i18nText ? this.i18nText[key] : '', }; this.zIndex.push(obj); } diff --git a/devui/dragdrop/demo/basic/basic.component.ts b/devui/dragdrop/demo/basic/basic.component.ts index 818fe34e..1da60b3d 100755 --- a/devui/dragdrop/demo/basic/basic.component.ts +++ b/devui/dragdrop/demo/basic/basic.component.ts @@ -3,16 +3,10 @@ import { Component } from '@angular/core'; @Component({ selector: 'd-basic', templateUrl: './basic.component.html', - styleUrls: ['./basic.component.scss'] + styleUrls: ['./basic.component.scss'], }) export class BasicComponent { - list1 = [ - { name: 'Visual Studio Code' }, - { name: 'WebStorm' }, - { name: 'Sublime' }, - { name: 'Atom (disable dragging)', disabled: true } - ]; - + list1 = [{ name: 'Visual Studio Code' }, { name: 'WebStorm' }, { name: 'Sublime' }, { name: 'Atom (disable dragging)', disabled: true }]; list2 = []; list3 = []; @@ -36,11 +30,10 @@ export class BasicComponent { } removeItem(item: any, list: Array) { - const index = list.map(function (e) { - return e.name; - }).indexOf(item.name); + const index = list.map((e) => e.name).indexOf(item.name); list.splice(index, 1); } + log(...v) { console.log(...v); } diff --git a/devui/dragdrop/demo/batch-drag/batch-drag.component.ts b/devui/dragdrop/demo/batch-drag/batch-drag.component.ts index 5a0b086f..3d96414c 100644 --- a/devui/dragdrop/demo/batch-drag/batch-drag.component.ts +++ b/devui/dragdrop/demo/batch-drag/batch-drag.component.ts @@ -14,7 +14,7 @@ export class BatchDragComponent { { name: 'WebStorm', isSelected: false }, { name: 'Sublime Text', isSelected: false }, { name: 'Atom', isSelected: false }, - { name: 'Notepad++', isSelected: false } + { name: 'Notepad++', isSelected: false }, ], }, { @@ -35,7 +35,7 @@ export class BatchDragComponent { { name: 'Windows', isSelected: false }, { name: 'Mac OS', isSelected: false }, { name: 'DOS', isSelected: false }, - { name: 'Chrome OS', isSelected: false } + { name: 'Chrome OS', isSelected: false }, ], }, { @@ -44,7 +44,7 @@ export class BatchDragComponent { { name: 'Android', isSelected: false }, { name: 'IOS', isSelected: false }, { name: 'BlackBerry', isSelected: false }, - { name: 'Symbian', isSelected: false } + { name: 'Symbian', isSelected: false }, ], }, { @@ -104,6 +104,7 @@ export class BatchDragComponent { const index = list.indexOf(item); list.splice(index, 1); } + batchSelect(item) { item.isSelected = !(item.isSelected || false); this.cdr.detectChanges(); @@ -116,6 +117,10 @@ export class BatchDragComponent { } cleanBatch() { - this.lists.forEach((list) => list.list.forEach((item) => {item['isSelected'] = false;})); + this.lists.forEach((list) => + list.list.forEach((item) => { + item.isSelected = false; + }) + ); } } diff --git a/devui/dragdrop/demo/cross-dimension/cross-dimension.component.ts b/devui/dragdrop/demo/cross-dimension/cross-dimension.component.ts index 81e46055..3abcf174 100644 --- a/devui/dragdrop/demo/cross-dimension/cross-dimension.component.ts +++ b/devui/dragdrop/demo/cross-dimension/cross-dimension.component.ts @@ -3,18 +3,12 @@ import { ChangeDetectorRef, Component } from '@angular/core'; @Component({ selector: 'd-cross-dimension', templateUrl: './cross-dimension.component.html', - styleUrls: ['./cross-dimension.component.scss'] + styleUrls: ['./cross-dimension.component.scss'], }) export class CrossDimensionComponent { lists = { - listA1: [ - { name: 'Visual Studio Code' }, - { name: 'WebStorm' }, - { name: 'Sublime Text' }, - { name: 'Atom' }, - { name: 'Notepad++' }, - ], - listA2: [ + listA1: [{ name: 'Visual Studio Code' }, { name: 'WebStorm' }, { name: 'Sublime Text' }, { name: 'Atom' }, { name: 'Notepad++' }], + listA2: [ { name: 'Chrome' }, { name: 'Firefox' }, { name: 'Opera' }, @@ -23,65 +17,59 @@ export class CrossDimensionComponent { { name: 'Safari' }, ], listA3: [], - listB1: [ - {name: 'Linux'}, - {name: 'Windows'}, - {name: 'Mac OS'}, - {name: 'DOS'}, - {name: 'Chrome OS'}, - ], - listB2: [ - {name: 'Android'}, - {name: 'IOS'}, - {name: 'BlackBerry'}, - {name: 'Symbian'}, - ], + listB1: [{ name: 'Linux' }, { name: 'Windows' }, { name: 'Mac OS' }, { name: 'DOS' }, { name: 'Chrome OS' }], + listB2: [{ name: 'Android' }, { name: 'IOS' }, { name: 'BlackBerry' }, { name: 'Symbian' }], listB3: [], listC1: [], listC2: [], - listC3: [] - + listC3: [], }; - owners = [ { - id: 'not-assign', - name: 'Not Assign', - collapse: false - }, { - id: 'available', - name: 'Available', - collapse: false - }, { - id: 'not-available', - name: 'Not Available', - collapse: false - }]; + owners = [ + { + id: 'not-assign', + name: 'Not Assign', + collapse: false, + }, + { + id: 'available', + name: 'Available', + collapse: false, + }, + { + id: 'not-available', + name: 'Not Available', + collapse: false, + }, + ]; listCol = [ { id: 'group1', - name: 'Group 1' - }, { + name: 'Group 1', + }, + { id: 'group2', - name: 'Group 2' - }, { + name: 'Group 2', + }, + { id: 'group3', - name: 'Group 3' - } + name: 'Group 3', + }, ]; ownerListMap = { 'not-assign': { group1: this.lists.listA1, group2: this.lists.listA2, - group3: this.lists.listA3 + group3: this.lists.listA3, }, - 'available': { + available: { group1: this.lists.listB1, group2: this.lists.listB2, - group3: this.lists.listB3 + group3: this.lists.listB3, }, 'not-available': { group1: this.lists.listC1, group2: this.lists.listC2, - group3: this.lists.listC3 + group3: this.lists.listC3, }, }; @@ -99,8 +87,10 @@ export class CrossDimensionComponent { const fromIndex = e.dragFromIndex; const parentArray = e.dragData.parent; const item = e.dragData.item; - if (-1 !== index) { - if (-1 !== fromIndex && index > fromIndex) { index--; } + if (index !== -1) { + if (fromIndex !== -1 && index > fromIndex) { + index--; + } targetArray.splice(index, 0, fromIndex === -1 ? item : targetArray.splice(fromIndex, 1)[0]); } else { targetArray.push(item); @@ -112,16 +102,18 @@ export class CrossDimensionComponent { batchDrop(e, targetArray: Array) { let fromIndexLessThanDropIndexCount = 0; - e.batchDragData.map((dragData) => { - const index = targetArray.indexOf(dragData.item); - if (index > -1 && index < e.dropIndex) { - fromIndexLessThanDropIndexCount++; - } - return dragData; - }).forEach((dragData) => { - this.removeItem(dragData.item, dragData.parent); - }); - targetArray.splice(e.dropIndex - fromIndexLessThanDropIndexCount, 0, ...(e.batchDragData.map(batchitem => batchitem.item))); + e.batchDragData + .map((dragData) => { + const index = targetArray.indexOf(dragData.item); + if (index > -1 && index < e.dropIndex) { + fromIndexLessThanDropIndexCount++; + } + return dragData; + }) + .forEach((dragData) => { + this.removeItem(dragData.item, dragData.parent); + }); + targetArray.splice(e.dropIndex - fromIndexLessThanDropIndexCount, 0, ...e.batchDragData.map((batchitem) => batchitem.item)); return; } @@ -129,6 +121,7 @@ export class CrossDimensionComponent { const index = list.indexOf(item); list.splice(index, 1); } + batchSelect(item) { item.isSelected = !(item.isSelected || false); this.cdr.detectChanges(); @@ -141,8 +134,12 @@ export class CrossDimensionComponent { } cleanBatch() { - Object.keys(this.lists).map(key => this.lists[key]).forEach(list => list.forEach( - item => {item['isSelected'] = false;} - )); + Object.keys(this.lists) + .map((key) => this.lists[key]) + .forEach((list) => + list.forEach((item) => { + item.isSelected = false; + }) + ); } } diff --git a/devui/dragdrop/demo/drop-scroll/drop-scroll.component.ts b/devui/dragdrop/demo/drop-scroll/drop-scroll.component.ts index 9d9b1d67..b07a97ab 100644 --- a/devui/dragdrop/demo/drop-scroll/drop-scroll.component.ts +++ b/devui/dragdrop/demo/drop-scroll/drop-scroll.component.ts @@ -3,73 +3,52 @@ import { Component } from '@angular/core'; @Component({ selector: 'd-drop-scroll', templateUrl: './drop-scroll.component.html', - styleUrls: ['./drop-scroll.component.scss'] + styleUrls: ['./drop-scroll.component.scss'], }) export class DropScrollComponent { lists = [ { name: 'IDE', - list: [ - { name: 'Visual Studio Code' }, - { name: 'WebStorm' }, - { name: 'Sublime Text' }, - { name: 'Atom' }, - { name: 'Notepad++' }, - ] + list: [{ name: 'Visual Studio Code' }, { name: 'WebStorm' }, { name: 'Sublime Text' }, { name: 'Atom' }, { name: 'Notepad++' }], }, { name: 'Browser', - list: [ + list: [ { name: 'Chrome' }, { name: 'Firefox' }, { name: 'Opera' }, { name: 'Edge' }, { name: 'Internet Explorer' }, { name: 'Safari' }, - ] + ], }, { name: 'OS', - list: [ - {name: 'Linux'}, - {name: 'Windows'}, - {name: 'Mac OS'}, - {name: 'DOS'}, - {name: 'Chrome OS'}, - ] + list: [{ name: 'Linux' }, { name: 'Windows' }, { name: 'Mac OS' }, { name: 'DOS' }, { name: 'Chrome OS' }], }, { name: 'Mobile OS', - list: [ - {name: 'Android'}, - {name: 'IOS'}, - {name: 'BlackBerry'}, - {name: 'Symbian'}, - ] + list: [{ name: 'Android' }, { name: 'IOS' }, { name: 'BlackBerry' }, { name: 'Symbian' }], }, { name: 'Website', - list: [] + list: [], }, { name: 'Search Engine', - list: [ - ] + list: [], }, { name: 'Technology Stack', - list: [ - ] + list: [], }, { name: 'Language', - list: [ - ] + list: [], }, { name: 'Whatever', - list: [ - ] + list: [], }, ]; showDropScrollArea = false; @@ -79,8 +58,10 @@ export class DropScrollComponent { const fromIndex = e.dragFromIndex; const parentArray = e.dragData.parent; const item = e.dragData.item; - if (-1 !== index) { - if (-1 !== fromIndex && index > fromIndex) { index--; } + if (index !== -1) { + if (fromIndex !== -1 && index > fromIndex) { + index--; + } targetArray.splice(index, 0, fromIndex === -1 ? item : targetArray.splice(fromIndex, 1)[0]); } else { targetArray.push(item); @@ -91,9 +72,7 @@ export class DropScrollComponent { } removeItem(item: any, list: Array) { - const index = list.map(function (e) { - return e.name; - }).indexOf(item.name); + const index = list.map((e) => e.name).indexOf(item.name); list.splice(index, 1); } } diff --git a/devui/dragdrop/demo/follow/follow.component.ts b/devui/dragdrop/demo/follow/follow.component.ts index 2b702368..f648f7c5 100755 --- a/devui/dragdrop/demo/follow/follow.component.ts +++ b/devui/dragdrop/demo/follow/follow.component.ts @@ -1,28 +1,15 @@ -import { Component, OnInit } from '@angular/core'; +import { Component } from '@angular/core'; @Component({ selector: 'd-follow', templateUrl: './follow.component.html', - styleUrls: ['./follow.component.scss'] + styleUrls: ['./follow.component.scss'], }) -export class FollowComponent implements OnInit { - list1 = [ - { name: 'Visual Studio Code' }, - { name: 'WebStorm' }, - { name: 'Sublime' }, - { name: 'Atom' } - ]; - +export class FollowComponent { + list1 = [{ name: 'Visual Studio Code' }, { name: 'WebStorm' }, { name: 'Sublime' }, { name: 'Atom' }]; list2 = []; appendToBody = false; - constructor() { - - } - - ngOnInit() { - } - onDrop(e: any) { let index = e.dropIndex; const fromIndex = e.dragFromIndex; @@ -41,10 +28,7 @@ export class FollowComponent implements OnInit { } removeItem(item: any, list: Array) { - const index = list.map(function (e) { - return e.name; - }).indexOf(item.name); + const index = list.map((e) => e.name).indexOf(item.name); list.splice(index, 1); } - } diff --git a/devui/dragdrop/demo/position/position.component.ts b/devui/dragdrop/demo/position/position.component.ts index 41c4af97..8ae922bd 100644 --- a/devui/dragdrop/demo/position/position.component.ts +++ b/devui/dragdrop/demo/position/position.component.ts @@ -3,10 +3,10 @@ import { Component } from '@angular/core'; @Component({ selector: 'd-position', templateUrl: './position.component.html', - styleUrls: ['./position.component.scss'] + styleUrls: ['./position.component.scss'], }) export class PositionComponent { - list1 = [{ name: 'Visual Studio Code' } ]; + list1 = [{ name: 'Visual Studio Code' }]; list2 = [{ name: 'WebStorm' }]; list3 = [{ name: 'Sublime' }]; list4 = [{ name: 'Atom' }]; @@ -17,7 +17,9 @@ export class PositionComponent { const parentArray = e.dragData.parent; const item = e.dragData.item; if (-1 !== index) { - if (-1 !== fromIndex && index > fromIndex) { index--; } + if (-1 !== fromIndex && index > fromIndex) { + index--; + } targetArray.splice(index, 0, fromIndex === -1 ? item : targetArray.splice(fromIndex, 1)[0]); } else { targetArray.push(item); @@ -28,9 +30,7 @@ export class PositionComponent { } removeItem(item: any, list: Array) { - const index = list.map(function (e) { - return e.name; - }).indexOf(item.name); + const index = list.map((e) => e.name).indexOf(item.name); list.splice(index, 1); } } diff --git a/devui/dragdrop/demo/switch/switch.component.ts b/devui/dragdrop/demo/switch/switch.component.ts index 36532d7c..54783009 100644 --- a/devui/dragdrop/demo/switch/switch.component.ts +++ b/devui/dragdrop/demo/switch/switch.component.ts @@ -3,19 +3,11 @@ import { Component } from '@angular/core'; @Component({ selector: 'd-switch', templateUrl: './switch.component.html', - styleUrls: ['./switch.component.scss'] + styleUrls: ['./switch.component.scss'], }) export class SwitchComponent { - list1 = [ - - ]; - - list2 = [ - { name: 'Visual Studio Code' }, - { name: 'WebStorm' }, - { name: 'Sublime' }, - { name: 'Atom' } - ]; + list1 = []; + list2 = [{ name: 'Visual Studio Code' }, { name: 'WebStorm' }, { name: 'Sublime' }, { name: 'Atom' }]; onDrop(e: any) { console.log(e); @@ -36,9 +28,7 @@ export class SwitchComponent { } removeItem(item: any, list: Array) { - const index = list.map(function (e) { - return e.name; - }).indexOf(item.name); + const index = list.map((e) => e.name).indexOf(item.name); list.splice(index, 1); } } diff --git a/devui/dragdrop/directives/batch-draggable.directive.ts b/devui/dragdrop/directives/batch-draggable.directive.ts index 4b41a3ce..d8f1dc21 100644 --- a/devui/dragdrop/directives/batch-draggable.directive.ts +++ b/devui/dragdrop/directives/batch-draggable.directive.ts @@ -2,21 +2,21 @@ import { AfterViewInit, Directive, EventEmitter, Input, OnChanges, OnDestroy, On import { DragDropService } from '../services/drag-drop.service'; import { DraggableDirective } from './draggable.directive'; export type BatchDragStyle = 'badge' | 'stack' | string; + @Directive({ selector: '[dDraggable][batchDrag]', - exportAs: 'dBatchDraggable' + exportAs: 'dBatchDraggable', }) - export class BatchDraggableDirective implements OnInit, OnChanges, OnDestroy, AfterViewInit { @Input() batchDragGroup = 'default'; @Input() batchDragActive = false; @Input() batchDragLastOneAutoActiveEventKeys = ['ctrlKey']; + @Input() batchDragStyle: Array = ['badge', 'stack']; @Output() batchDragActiveEvent = new EventEmitter(); dragData; needToRestore = false; - @Input() batchDragStyle: Array = ['badge', 'stack']; - constructor(@Self() private draggable: DraggableDirective, private dragDropService: DragDropService) { + constructor(@Self() private draggable: DraggableDirective, private dragDropService: DragDropService) { this.draggable.batchDraggable = this; } @@ -34,11 +34,10 @@ export class BatchDraggableDirective implements OnInit, OnChanges, OnDestroy, Af } } } - } ngOnChanges(changes: SimpleChanges): void { - if (changes['batchDragActive']) { + if (changes.batchDragActive) { if (!this.initDragDataByIdentity()) { if (this.batchDragActive) { if (!this.dragData && this.allowAddToBatchGroup()) { @@ -72,8 +71,11 @@ export class BatchDraggableDirective implements OnInit, OnChanges, OnDestroy, Af } registerRestoreDragDataViewAfterViewInitWhiteDragging() { - if (this.dragDropService.draggedEl && this.dragDropService.draggedElIdentity && - this.dragDropService.draggedEl !== this.draggable.el.nativeElement) { + if ( + this.dragDropService.draggedEl && + this.dragDropService.draggedElIdentity && + this.dragDropService.draggedEl !== this.draggable.el.nativeElement + ) { this.needToRestore = true; } } @@ -102,7 +104,7 @@ export class BatchDraggableDirective implements OnInit, OnChanges, OnDestroy, Af this.dragData = this.dragData || { identity: this.draggable.dragIdentity || undefined, draggable: this.draggable, - dragData: this.draggable.dragData + dragData: this.draggable.dragData, }; this.dragDropService.batchDragData = this.addToArrayIfNotExist(this.dragDropService.batchDragData, this.dragData); } @@ -124,7 +126,9 @@ export class BatchDraggableDirective implements OnInit, OnChanges, OnDestroy, Af } private deleteFromArrayIfExist(array: any[], target: any) { - if (!array) { return; } + if (!array) { + return; + } if (array.length > 0) { const index = array.indexOf(target); if (index > -1) { @@ -140,22 +144,24 @@ export class BatchDraggableDirective implements OnInit, OnChanges, OnDestroy, Af } else if (!this.dragDropService.batchDragData) { return undefined; } else { - return this.dragDropService.batchDragData.filter(dragData => dragData.identity === this.draggable.dragIdentity).pop(); + return this.dragDropService.batchDragData.filter((dragData) => dragData.identity === this.draggable.dragIdentity).pop(); } } active() { - this.batchDragActiveEvent.emit({el: this.draggable.el.nativeElement, data: this.draggable.dragData}); + this.batchDragActiveEvent.emit({ el: this.draggable.el.nativeElement, data: this.draggable.dragData }); } public updateDragData() { // 选中状态才更新 - if (!this.dragData) {return; } + if (!this.dragData) { + return; + } // 需要维持内存地址不变 Object.assign(this.dragData, { identity: this.draggable.dragIdentity || undefined, draggable: this.draggable, - dragData: this.draggable.dragData + dragData: this.draggable.dragData, }); } } diff --git a/devui/dragdrop/directives/drag-preivew-clone-from-domRef.component.ts b/devui/dragdrop/directives/drag-preivew-clone-from-domRef.component.ts index 74591c18..89b6e8e4 100644 --- a/devui/dragdrop/directives/drag-preivew-clone-from-domRef.component.ts +++ b/devui/dragdrop/directives/drag-preivew-clone-from-domRef.component.ts @@ -1,4 +1,4 @@ -import { AfterViewInit, ChangeDetectorRef, Component, ElementRef, Input, OnChanges, OnDestroy, SimpleChanges } from '@angular/core'; +import { AfterViewInit, ChangeDetectorRef, Component, ElementRef, Input, OnChanges, OnDestroy, SimpleChanges } from '@angular/core'; import { DragDropService } from '../services/drag-drop.service'; @Component({ @@ -11,15 +11,11 @@ export class DragPreviewCloneDomRefComponent implements AfterViewInit, OnChanges @Input() domRef: HTMLElement; @Input() copyStyle = true; cloneNode; - constructor(private el: ElementRef, private cdr: ChangeDetectorRef, private dragDropService: DragDropService) { - } - ngAfterViewInit() { - if (!this.cloneNode) { - this.createView(); - } - } + + constructor(private el: ElementRef, private cdr: ChangeDetectorRef, private dragDropService: DragDropService) {} + ngOnChanges(changes: SimpleChanges) { - if (changes['domRef']) { + if (changes.domRef) { if (this.cloneNode) { this.destroyView(); this.createView(); @@ -28,6 +24,13 @@ export class DragPreviewCloneDomRefComponent implements AfterViewInit, OnChanges } } } + + ngAfterViewInit() { + if (!this.cloneNode) { + this.createView(); + } + } + ngOnDestroy() { if (this.cloneNode) { this.destroyView(); diff --git a/devui/dragdrop/directives/drop-scroll-enhance.type.ts b/devui/dragdrop/directives/drop-scroll-enhance.type.ts index 91e492ca..7ab6d98a 100644 --- a/devui/dragdrop/directives/drop-scroll-enhance.type.ts +++ b/devui/dragdrop/directives/drop-scroll-enhance.type.ts @@ -1,10 +1,10 @@ export type DropScrollEdgeDistancePercent = number; // 单位 px / px export type DropScrollSpeed = number; // 单位 px/ s -export type DropScrollSpeedFunction = (x: DropScrollEdgeDistancePercent) => DropScrollSpeed; +export type DropScrollSpeedFunction = (x: DropScrollEdgeDistancePercent) => DropScrollSpeed; export type DropScrollDirection = 'h' | 'v'; // 'both' 暂不支持双向滚动 export enum DropScrollOrientation { - forward, // 进， 右/下 - backward // 退， 左/上 + forward = 0, // 进， 右/下 + backward = 1, // 退， 左/上 } export interface DropScrollAreaOffset { left?: number; @@ -14,8 +14,9 @@ export interface DropScrollAreaOffset { widthOffset?: number; heightOffset?: number; } + export type DropScrollTriggerEdge = 'left' | 'right' | 'top' | 'bottom'; export const DropScrollEnhanceTimingFunctionGroup = { - default: (x: number) => Math.ceil((1 - x) * 18) * 100 + default: (x: number) => Math.ceil((1 - x) * 18) * 100, }; diff --git a/devui/dragdrop/services/drag-drop.service.ts b/devui/dragdrop/services/drag-drop.service.ts index 322dba46..25c8aa9b 100755 --- a/devui/dragdrop/services/drag-drop.service.ts +++ b/devui/dragdrop/services/drag-drop.service.ts @@ -62,14 +62,14 @@ export class DragDropService { this.touchInstance = DragDropTouch.getInstance(); // service not support OnInit, only support OnDestroy, so write in constructor // safari的img必须要有src - this.dragEmptyImage.src - = 'data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg=='; + this.dragEmptyImage.src = + 'data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg=='; this.document = this.doc; } newSubscription() { this.subscription.unsubscribe(); // eslint-disable-next-line no-return-assign - return this.subscription = new Subscription(); + return (this.subscription = new Subscription()); } enableDraggedCloneNodeFollowMouse() { @@ -107,10 +107,14 @@ export class DragDropService { this.dragCloneNode.style.width = this.dragOffset.width + 'px'; this.dragCloneNode.style.height = this.dragOffset.height + 'px'; - if (!(this.dragPreviewDirective - && this.dragPreviewDirective.dragPreviewTemplate - && this.dragPreviewDirective.dragPreviewOptions - && this.dragPreviewDirective.dragPreviewOptions.skipBatchPreview)) { + if ( + !( + this.dragPreviewDirective && + this.dragPreviewDirective.dragPreviewTemplate && + this.dragPreviewDirective.dragPreviewOptions && + this.dragPreviewDirective.dragPreviewOptions.skipBatchPreview + ) + ) { // 批量拖拽样式 if (this.batchDragging && this.batchDragData && this.batchDragData.length > 1) { // 创建一个节点容器 @@ -135,7 +139,7 @@ export class DragDropService { lineHeight: '24px', textAlign: 'center', color: '#fff', - background: ['#5170ff', 'var(--brand-1, #5170ff)'] + background: ['#5170ff', 'var(--brand-1, #5170ff)'], }; Utils.addElStyles(badge, style); node.appendChild(badge); @@ -153,11 +157,11 @@ export class DragDropService { position: 'absolute', left: -5 * (i + 1) + 'px', top: -5 * (i + 1) + 'px', - zIndex: String(- (i + 1)), + zIndex: String(-(i + 1)), width: this.dragOffset.width + 'px', height: this.dragOffset.height + 'px', background: '#fff', - border: ['1px solid #5170ff', '1px solid var(--brand-1, #5170ff)'] + border: ['1px solid #5170ff', '1px solid var(--brand-1, #5170ff)'], }; Utils.addElStyles(stackNode, stackStyle); node.appendChild(stackNode); @@ -213,16 +217,16 @@ export class DragDropService { interceptChildNode(parentNode, childNodeList) { const interceptOptions = { - root: parentNode + root: parentNode, }; this.intersectionObserver = new IntersectionObserver(this.setChildNodeHide, interceptOptions); - [].forEach.call(childNodeList, childNode => { + [].forEach.call(childNodeList, (childNode) => { this.intersectionObserver.observe(childNode); }); } setChildNodeHide(entries) { - entries.forEach(element => { + entries.forEach((element) => { const { isIntersecting, target: childNode } = element; if (isIntersecting) { childNode.style.display = 'block'; @@ -236,20 +240,22 @@ export class DragDropService { const { offsetLeft, offsetTop } = this.dragOffset; const { clientX, clientY } = event; requestAnimationFrame(() => { - if (!this.dragCloneNode) { return; } + if (!this.dragCloneNode) { + return; + } this.dragCloneNode.style.left = clientX - offsetLeft + 'px'; this.dragCloneNode.style.top = clientY - offsetTop + 'px'; }); }; getBatchDragData(identity?, order: ((a: any, b: any) => number) | 'select' | 'draggedElFirst' = 'draggedElFirst') { - const result = this.batchDragData.map(dragData => dragData.dragData); + const result = this.batchDragData.map((dragData) => dragData.dragData); if (typeof order === 'function') { - result.sort(<((a: any, b: any) => number)>order); + result.sort(<(a: any, b: any) => number>order); } else if (order === 'draggedElFirst') { let dragData = this.dragData; if (identity) { - const realDragData = this.batchDragData.filter(dd => dd.identity === identity).pop().dragData; + const realDragData = this.batchDragData.filter((dd) => dd.identity === identity).pop().dragData; dragData = realDragData; } result.splice(result.indexOf(dragData), 1); @@ -266,9 +272,11 @@ export class DragDropService { const batchDragData = this.batchDragData; if (this.batchDragData) { this.batchDragData - .filter(dragData => dragData.draggable) - .map(dragData => dragData.draggable) - .forEach(draggable => {draggable.batchDraggable.dragData = undefined;}); + .filter((dragData) => dragData.draggable) + .map((dragData) => dragData.draggable) + .forEach((draggable) => { + draggable.batchDraggable.dragData = undefined; + }); this.batchDragData = undefined; this.batchDragGroup = undefined; } @@ -276,7 +284,7 @@ export class DragDropService { } public copyStyle(source, target) { - ['id', 'class', 'style', 'draggable'].forEach(function (att) { + ['id', 'class', 'style', 'draggable'].forEach((att) => { target.removeAttribute(att); }); @@ -294,5 +302,4 @@ export class DragDropService { this.copyStyle(source.children[i], target.children[i]); } } - } diff --git a/devui/dragdrop/shared/utils.ts b/devui/dragdrop/shared/utils.ts index b8902982..cad3a40b 100755 --- a/devui/dragdrop/shared/utils.ts +++ b/devui/dragdrop/shared/utils.ts @@ -8,9 +8,8 @@ export class Utils { */ public static matches(element: any, selectorName: string): boolean { const proto: any = Element.prototype; - const func = - proto['matches'] || + proto.matches || proto.matchesSelector || proto.mozMatchesSelector || proto.msMatchesSelector || @@ -34,7 +33,9 @@ export class Utils { * className */ public static addClass(elementRef: ElementRef | any, className: string) { - if (className === undefined) {return; } + if (className === undefined) { + return; + } const e = this.getElementWithValidClassList(elementRef); if (e) { @@ -48,7 +49,9 @@ export class Utils { * className */ public static removeClass(elementRef: ElementRef | any, className: string) { - if (className === undefined) {return; } + if (className === undefined) { + return; + } const e = this.getElementWithValidClassList(elementRef); if (e) { @@ -76,16 +79,14 @@ export class Utils { const ret = []; let len = args.length; - if (len === 0) { return ret; } + if (len === 0) { + return ret; + } - const start = slice < 0 - ? Math.max(0, slice + len) - : slice || 0; + const start = slice < 0 ? Math.max(0, slice + len) : slice || 0; if (sliceEnd !== undefined) { - len = sliceEnd < 0 - ? sliceEnd + len - : sliceEnd; + len = sliceEnd < 0 ? sliceEnd + len : sliceEnd; } while (len-- > start) { @@ -101,7 +102,7 @@ export class Utils { if (Object.prototype.hasOwnProperty.call(styles, s)) { if (Array.isArray(styles[s])) { // 用于支持兼容渐退 - styles[s].forEach(val => { + styles[s].forEach((val) => { el.style[s] = val; }); } else { @@ -112,19 +113,32 @@ export class Utils { } } public static dispatchEventToUnderElement(event: DragEvent, target?: HTMLElement, eventType?: string) { - const up = target || (event.target); + const up = target || event.target; up.style.display = 'none'; - const {x, y} = {x: event.clientX, y: event.clientY}; + const { x, y } = { x: event.clientX, y: event.clientY }; const under = document.elementFromPoint(x, y); up.style.display = ''; if (!under) { return event; } const ev = document.createEvent('DragEvent'); - ev.initMouseEvent(eventType || event.type, true, true, window, 0, - event.screenX, event.screenY, event.clientX, event.clientY, - event.ctrlKey, event.altKey, event.shiftKey, event.metaKey, - event.button, event.relatedTarget); + ev.initMouseEvent( + eventType || event.type, + true, + true, + window, + 0, + event.screenX, + event.screenY, + event.clientX, + event.clientY, + event.ctrlKey, + event.altKey, + event.shiftKey, + event.metaKey, + event.button, + event.relatedTarget + ); if (ev.dataTransfer !== null) { ev.dataTransfer.setData('text', ''); ev.dataTransfer.effectAllowed = event.dataTransfer.effectAllowed; diff --git a/devui/dragdrop/touch-support/dragdrop-touch.ts b/devui/dragdrop/touch-support/dragdrop-touch.ts index d87bb4ab..c45de273 100644 --- a/devui/dragdrop/touch-support/dragdrop-touch.ts +++ b/devui/dragdrop/touch-support/dragdrop-touch.ts @@ -12,10 +12,10 @@ export class DragDropTouch { static readonly PRESS_HOLD_MARGIN = 25; // pixels that finger might shiver while pressing static readonly PRESS_HOLD_THRESHOLD = 0; // pixels to move before drag starts static readonly DRAG_HANDLE_ATTR = 'data-drag-handle-selector'; - static readonly rmvAttrs = 'id,class,style,draggable'.split(','); static readonly kbdProps = 'altKey,ctrlKey,metaKey,shiftKey'.split(','); static readonly ptProps = 'pageX,pageY,clientX,clientY,screenX,screenY'.split(','); + private static instance: DragDropTouch = null; dataTransfer: DataTransfer; @@ -25,7 +25,7 @@ export class DragDropTouch { lastTarget: HTMLElement; // touched draggble element dragSource: HTMLElement; - ptDown: {x: number; y: number}; + ptDown: { x: number; y: number }; isDragEnabled: boolean; isDropZone: boolean; pressHoldInterval; @@ -54,7 +54,7 @@ export class DragDropTouch { get passive() { supportsPassive = true; return true; - } + }, }); // listen to touch events if (DragDropTouch.isTouchDevice()) { @@ -64,7 +64,7 @@ export class DragDropTouch { const tmod = this.touchmoveOnDocument; const teod = this.touchendOnDocument; const opt = supportsPassive ? { passive: false, capture: false } : false; - const optPassive = supportsPassive ? {passive: true} : false; + const optPassive = supportsPassive ? { passive: true } : false; d.addEventListener('touchstart', ts, opt); d.addEventListener('touchmove', tmod, optPassive); d.addEventListener('touchend', teod); @@ -91,11 +91,13 @@ export class DragDropTouch { const d: Document = document; const w: Window = window; let bool; - if ('ontouchstart' in d // normal mobile device - || 'ontouchstart' in w - || navigator.maxTouchPoints > 0 - || navigator['msMaxTouchPoints'] > 0 - || window['DocumentTouch'] && document instanceof window['DocumentTouch']) { + if ( + 'ontouchstart' in d || // normal mobile device + 'ontouchstart' in w || + navigator.maxTouchPoints > 0 || + (navigator as any).msMaxTouchPoints > 0 || + ((window as any).DocumentTouch && document instanceof (window as any).DocumentTouch) + ) { bool = true; } else { const fakeBody = document.createElement('fakebody'); @@ -118,13 +120,13 @@ export class DragDropTouch { return bool; } // ** event listener binding - bindTouchmoveTouchend (e: TouchEvent) { + bindTouchmoveTouchend(e: TouchEvent) { this.touchTarget = e.target; e.target.addEventListener('touchmove', this.touchmoveListener, this.listenerOpt); e.target.addEventListener('touchend', this.touchendListener); e.target.addEventListener('touchcancel', this.touchendListener); } - removeTouchmoveTouchend () { + removeTouchmoveTouchend() { if (this.touchTarget) { this.touchTarget.removeEventListener('touchmove', this.touchmoveListener); this.touchTarget.removeEventListener('touchend', this.touchendListener); @@ -235,9 +237,7 @@ export class DragDropTouch { // ** utilities // ignore events that have been handled or that involve more than one touch shouldHandle(e) { - return e && - !e.defaultPrevented && - e.touches && e.touches.length < 2; + return e && !e.defaultPrevented && e.touches && e.touches.length < 2; } // use regular condition outside of press & hold mode shouldHandleMove(e) { @@ -245,13 +245,11 @@ export class DragDropTouch { } // allow to handle moves that involve many touches for press & hold shouldHandlePressHoldMove(e) { - return DragDropTouch.IS_PRESS_HOLD_MODE && - this.isDragEnabled && e && e.touches && e.touches.length; + return DragDropTouch.IS_PRESS_HOLD_MODE && this.isDragEnabled && e && e.touches && e.touches.length; } // reset data if user drags without pressing & holding shouldCancelPressHoldMove(e) { - return DragDropTouch.IS_PRESS_HOLD_MODE && !this.isDragEnabled && - this.getDelta(e) > DragDropTouch.PRESS_HOLD_MARGIN; + return DragDropTouch.IS_PRESS_HOLD_MODE && !this.isDragEnabled && this.getDelta(e) > DragDropTouch.PRESS_HOLD_MARGIN; } // start dragging when mouseover element matches drag handler selector and specified delta is detected shouldStartDragging(e) { @@ -262,8 +260,7 @@ export class DragDropTouch { } // start dragging when specified delta is detected const delta = this.getDelta(e); - return delta > DragDropTouch.THRESHOLD || - (DragDropTouch.IS_PRESS_HOLD_MODE && delta >= DragDropTouch.PRESS_HOLD_THRESHOLD); + return delta > DragDropTouch.THRESHOLD || (DragDropTouch.IS_PRESS_HOLD_MODE && delta >= DragDropTouch.PRESS_HOLD_THRESHOLD); } // find drag handler selector for dragstart only with partial element getDragHandle() { @@ -275,22 +272,22 @@ export class DragDropTouch { // test if element matches selector matchSelector(element, selector) { if (selector) { - const proto = Element.prototype; + const proto: any = Element.prototype; const func = - proto['matches'] || - proto['matchesSelector'] || - proto['mozMatchesSelector'] || - proto['msMatchesSelector'] || - proto['oMatchesSelector'] || - proto['webkitMatchesSelector'] || - function (s) { - const matches = (this.document || this.ownerDocument).querySelectorAll(s); - let i = matches.length; - while (--i >= 0 && matches.item(i) !== this) { - // do nothing - } - return i > -1; - }; + proto.matches || + proto.matchesSelector || + proto.mozMatchesSelector || + proto.msMatchesSelector || + proto.oMatchesSelector || + proto.webkitMatchesSelector || + function (s) { + const matches = (this.document || this.ownerDocument).querySelectorAll(s); + let i = matches.length; + while (--i >= 0 && matches.item(i) !== this) { + // do nothing + } + return i > -1; + }; return func.call(element, selector); } return true; @@ -318,7 +315,9 @@ export class DragDropTouch { } // get distance between the current touch event and the first one getDelta(e) { - if (DragDropTouch.IS_PRESS_HOLD_MODE && !this.ptDown) { return 0; } + if (DragDropTouch.IS_PRESS_HOLD_MODE && !this.ptDown) { + return 0; + } const p = this.getPoint(e); return Math.abs(p.x - this.ptDown.x) + Math.abs(p.y - this.ptDown.y); } @@ -376,7 +375,7 @@ export class DragDropTouch { }); } // copy properties from an object to another - copyProps (dst, src, props) { + copyProps(dst, src, props) { for (let i = 0; i < props.length; i++) { const p = props[i]; dst[p] = src[p]; @@ -385,9 +384,7 @@ export class DragDropTouch { // copy styles/attributes from drag source to drag image element copyStyle(src, dst) { // remove potentially troublesome attributes - DragDropTouch.rmvAttrs.forEach(function (att) { - dst.removeAttribute(att); - }); + DragDropTouch.rmvAttrs.forEach((att) => dst.removeAttribute(att)); // copy canvas content if (src instanceof HTMLCanvasElement) { const canSrc = src; @@ -431,11 +428,11 @@ export class DragDropTouch { button: 0, which: 0, buttons: 1, - dataTransfer: this.dataTransfer + dataTransfer: this.dataTransfer, }; this.copyProps(evt, e, DragDropTouch.kbdProps); this.copyProps(evt, t, DragDropTouch.ptProps); - this.copyProps(evt, {fromTouch: true}, ['fromTouch']); // mark as from touch event + this.copyProps(evt, { fromTouch: true }, ['fromTouch']); // mark as from touch event this.copyProps(evt, obj, Object.keys(obj)); target.dispatchEvent(evt); @@ -470,20 +467,19 @@ export class DragDropTouch { this.dragoverTimer = undefined; } } - } /* eslint-disable-next-line @typescript-eslint/no-namespace */ export namespace DragDropTouch { /** - * Object used to hold the data that is being dragged during drag and drop operations. - * - * It may hold one or more data items of different types. For more information about - * drag and drop operations and data transfer objects, see - * HTML Drag and Drop API. - * - * This object is created automatically by the @see:DragDropTouch singleton and is - * accessible through the @see:dataTransfer property of all drag events. - */ + * Object used to hold the data that is being dragged during drag and drop operations. + * + * It may hold one or more data items of different types. For more information about + * drag and drop operations and data transfer objects, see + * HTML Drag and Drop API. + * + * This object is created automatically by the @see:DragDropTouch singleton and is + * accessible through the @see:dataTransfer property of all drag events. + */ export class DataTransfer implements DataTransfer { files; items; @@ -519,21 +515,21 @@ export namespace DragDropTouch { return Object.keys(this._data); } - constructor () { + constructor() { this._dropEffect = 'move'; this._effectAllowed = 'all'; this._data = {}; } /** - * Removes the data associated with a given type. - * - * The type argument is optional. If the type is empty or not specified, the data - * associated with all types is removed. If data for the specified type does not exist, - * or the data transfer contains no data, this method will have no effect. - * - * @param type Type of data to remove. - */ - clearData (type) { + * Removes the data associated with a given type. + * + * The type argument is optional. If the type is empty or not specified, the data + * associated with all types is removed. If data for the specified type does not exist, + * or the data transfer contains no data, this method will have no effect. + * + * @param type Type of data to remove. + */ + clearData(type) { if (type !== null) { delete this._data[type]; } else { @@ -546,7 +542,7 @@ export namespace DragDropTouch { * * @param type Type of data to retrieve. */ - getData (type) { + getData(type) { return this._data[type] || ''; } @@ -559,7 +555,7 @@ export namespace DragDropTouch { * @param type Type of data to add. * @param value Data to add. */ - setData (type, value) { + setData(type, value) { this._data[type] = value; } /** @@ -569,11 +565,10 @@ export namespace DragDropTouch { * @param offsetX The horizontal offset within the image. * @param offsetY The vertical offset within the image. */ - setDragImage (img, offsetX, offsetY) { + setDragImage(img, offsetX, offsetY) { const ddt = DragDropTouch.getInstance(); ddt.imgCustom = img; ddt.imgOffset = { x: offsetX, y: offsetY }; } } - } diff --git a/devui/drawer/demo/drawer-demo.component.ts b/devui/drawer/demo/drawer-demo.component.ts index 6386fb6f..11d3c0e8 100755 --- a/devui/drawer/demo/drawer-demo.component.ts +++ b/devui/drawer/demo/drawer-demo.component.ts @@ -25,16 +25,17 @@ export class DrawerDemoComponent implements OnInit, OnDestroy { templateSource: Array = [ { title: 'HTML', language: 'xml', code: require('./template/template.component.html?raw') }, - { title: 'TS', language: 'typescript', code: require('./template/template.component.ts?raw') } + { title: 'TS', language: 'typescript', code: require('./template/template.component.ts?raw') }, ]; resizeSource: Array = [ { title: 'HTML', language: 'xml', code: require('./resize/resize.component.html?raw') }, - { title: 'TS', language: 'typescript', code: require('./resize/resize.component.ts?raw') } + { title: 'TS', language: 'typescript', code: require('./resize/resize.component.ts?raw') }, ]; navItems = []; subs: Subscription = new Subscription(); + constructor(private translate: TranslateService) {} ngOnInit() { @@ -56,8 +57,8 @@ export class DrawerDemoComponent implements OnInit, OnDestroy { this.navItems = [ { dAnchorLink: 'basic-usage', value: values['basic-usage'] }, { dAnchorLink: 'do-not-destroy-after-closing', value: values['do-not-destroy-after-closing'] }, - { dAnchorLink: 'template', value: values['template'] }, - { dAnchorLink: 'resize', value: values['resize'] } + { dAnchorLink: 'template', value: values.template }, + { dAnchorLink: 'resize', value: values.resize }, ]; } diff --git a/devui/drawer/drawer.component.ts b/devui/drawer/drawer.component.ts index 49885e8b..df51b6ac 100755 --- a/devui/drawer/drawer.component.ts +++ b/devui/drawer/drawer.component.ts @@ -13,12 +13,12 @@ import { Renderer2, TemplateRef, ViewChild, - ViewContainerRef + ViewContainerRef, } from '@angular/core'; import { ResizeDirective } from 'ng-devui/splitter'; import { backdropFadeInOut, flyInOut } from 'ng-devui/utils'; import { isNumber, parseInt, trim } from 'lodash-es'; -import { fromEvent, Observable, Subject, Subscription } from 'rxjs'; +import { Observable, Subject, Subscription, fromEvent } from 'rxjs'; import { debounceTime, distinctUntilChanged, filter, map, switchMap, takeUntil, tap } from 'rxjs/operators'; @Directive({ @@ -172,8 +172,8 @@ export class DrawerComponent implements OnInit, OnDestroy { } this.animateState = 'in'; const activeElement = this.document.activeElement; - if (activeElement && typeof activeElement['blur'] === 'function') { - activeElement['blur'](); + if (activeElement && typeof (activeElement as any).blur === 'function') { + (activeElement as any).blur(); } setTimeout(() => { this.handleResizeWidth(); diff --git a/devui/dropdown/demo/basic/basic.component.html b/devui/dropdown/demo/basic/basic.component.html index cb646c70..8579ad68 100755 --- a/devui/dropdown/demo/basic/basic.component.html +++ b/devui/dropdown/demo/basic/basic.component.html @@ -3,32 +3,32 @@ more -