Skip to content

Commit

Permalink
feat(nxt-dropzone-wrapper)!: add correct typings, remove old types
Browse files Browse the repository at this point in the history 
BREAKING CHANGE: remove exports for helper types, since they're now provided by dropzone.js
  • Loading branch information
@HitkoDev
HitkoDev committed Mar 13, 2023
1 parent 13acb7c commit e212b10
Show file tree
Hide file tree
Showing 8 changed files with 303 additions and 420 deletions.
18 changes: 18 additions & 0 deletions packages/dropzone-wrapper/.compodocrc.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
{
"$schema": "../../node_modules/@compodoc/compodoc/src/config/schema.json",
"tsconfig": "./tsconfig.lib.json",
"exportFormat": "html",
"minimal": false,
"silent": true,
"disablePrivate": true,
"disableInternal": true,
"disableSourceCode": true,
"disableCoverage": true,
"disableDomTree": true,
"disableDependencies": true,
"disableRoutesGraph": true,
"disableTemplateTab": true,
"disableGraph": true,
"hideGenerator": true,
"output": "../../docs/nxt-dropzone-wrapper"
}
3 changes: 2 additions & 1 deletion packages/dropzone-wrapper/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,8 @@
"lint:sass": "stylelint \"src/**/*.scss\"",
"lint:sass:fix": "yarn lint:sass --fix",
"test": "ng test dropzone-wrapper --no-watch",
"test:watch": "ng test dropzone-wrapper"
"test:watch": "ng test dropzone-wrapper",
"docs": "npx compodoc -c .compodocrc.json"
},
"peerDependencies": {
"@angular/common": "^15.2.1",
Expand Down
3 changes: 1 addition & 2 deletions packages/dropzone-wrapper/src/lib/dropzone.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
<div class="dz-wrapper"
[class.dropzone]="useDropzoneClass"
[nxtDropzone]="config"
[disabled]="disabled"
(init)="DZ_INIT.emit($event)">
[disabled]="disabled">
<div class="dz-message"
[class.disabled]="disabled"
[class.dz-placeholder]="placeholder">
Expand Down
39 changes: 2 additions & 37 deletions packages/dropzone-wrapper/src/lib/dropzone.component.scss
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
$color_1: #666;
$background-color_1: #eee;
$background-color_2: rgba(#fff, 0.5);
$background-color_2: rgba(255, 255, 255, 0.5);
$background-color_3: #666;
$border-color_1: rgba(#aaa, 0);
$border-color_1: rgba(170, 170, 170, 0);
$border-color_2: #aaa;

nxt-dropzone {
Expand Down Expand Up @@ -170,38 +170,3 @@ nxt-dropzone {
}
}
}

nxt-dropzone[fxflex] {
display: flex;
flex-direction: inherit;
min-width: 0;
min-height: 0;

& > .dropzone.dz-wrapper {
flex: 1 1 auto;
min-width: 0;
min-height: 0;
}
}

nxt-dropzone[fxlayout] {
align-items: inherit;
align-content: inherit;
justify-content: inherit;

& > .dropzone.dz-wrapper.dz-single {
display: flex;
flex-direction: column;
align-items: center;
align-content: center;
justify-content: center;
}

& > .dropzone.dz-wrapper.dz-multiple {
display: flex;
flex-flow: row wrap;
align-items: flex-start;
align-content: flex-start;
justify-content: space-between;
}
}
119 changes: 55 additions & 64 deletions packages/dropzone-wrapper/src/lib/dropzone.component.ts
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
/* eslint-disable @angular-eslint/no-output-rename */
import { isPlatformBrowser } from '@angular/common'
import { Component, EventEmitter, Inject, Input, OnInit, Output, PLATFORM_ID, ViewChild, ViewEncapsulation } from '@angular/core'
import { Component, EventEmitter, Input, OnInit, Output, ViewChild, ViewEncapsulation } from '@angular/core'
import { DropzoneDirective } from './dropzone.directive'
import { DropzoneConfigInterface, DropzoneEvent, DropzoneEvents } from './dropzone.interfaces'
import { DropzoneConfigInterface } from './dropzone.interfaces'

@Component({
selector: 'nxt-dropzone',
Expand All @@ -15,6 +14,7 @@ import { DropzoneConfigInterface, DropzoneEvent, DropzoneEvents } from './dropzo
encapsulation: ViewEncapsulation.None
})
export class DropzoneComponent implements OnInit {

@Input() disabled: boolean = false

@Input() config?: DropzoneConfigInterface
Expand All @@ -24,68 +24,59 @@ export class DropzoneComponent implements OnInit {

@Input() useDropzoneClass: boolean = true

@Output('init') DZ_INIT = new EventEmitter<any>()

@Output('error') DZ_ERROR = new EventEmitter<any>()
@Output('success') DZ_SUCCESS = new EventEmitter<any>()
@Output('sending') DZ_SENDING = new EventEmitter<any>()
@Output('canceled') DZ_CANCELED = new EventEmitter<any>()
@Output('complete') DZ_COMPLETE = new EventEmitter<any>()
@Output('processing') DZ_PROCESSING = new EventEmitter<any>()

@Output('drop') DZ_DROP = new EventEmitter<any>()
@Output('dragStart') DZ_DRAGSTART = new EventEmitter<any>()
@Output('dragEnd') DZ_DRAGEND = new EventEmitter<any>()
@Output('dragEnter') DZ_DRAGENTER = new EventEmitter<any>()
@Output('dragOver') DZ_DRAGOVER = new EventEmitter<any>()
@Output('dragLeave') DZ_DRAGLEAVE = new EventEmitter<any>()

@Output('thumbnail') DZ_THUMBNAIL = new EventEmitter<any>()
@Output('addedFile') DZ_ADDEDFILE = new EventEmitter<any>()
@Output('addedFiles') DZ_ADDEDFILES = new EventEmitter<any>()
@Output('removedFile') DZ_REMOVEDFILE = new EventEmitter<any>()
@Output('uploadProgress') DZ_UPLOADPROGRESS = new EventEmitter<any>()
@Output('maxFilesReached') DZ_MAXFILESREACHED = new EventEmitter<any>()
@Output('maxFilesExceeded') DZ_MAXFILESEXCEEDED = new EventEmitter<any>()

@Output('errorMultiple') DZ_ERRORMULTIPLE = new EventEmitter<any>()
@Output('successMultiple') DZ_SUCCESSMULTIPLE = new EventEmitter<any>()
@Output('sendingMultiple') DZ_SENDINGMULTIPLE = new EventEmitter<any>()
@Output('canceledMultiple') DZ_CANCELEDMULTIPLE = new EventEmitter<any>()
@Output('completeMultiple') DZ_COMPLETEMULTIPLE = new EventEmitter<any>()
@Output('processingMultiple') DZ_PROCESSINGMULTIPLE = new EventEmitter<any>()

@Output('reset') DZ_RESET = new EventEmitter<any>()
@Output('queueComplete') DZ_QUEUECOMPLETE = new EventEmitter<any>()
@Output('totalUploadProgress') DZ_TOTALUPLOADPROGRESS = new EventEmitter<any>()

@ViewChild(DropzoneDirective, { static: true }) directiveRef?: DropzoneDirective

constructor(
// eslint-disable-next-line @typescript-eslint/ban-types
@Inject(PLATFORM_ID) private readonly platformId: Object
) { }

ngOnInit(): void {
if (!isPlatformBrowser(this.platformId)) {
return
}

setTimeout(() => {
DropzoneEvents.forEach((eventName: DropzoneEvent) => {
if (this.directiveRef) {
const output = `DZ_${eventName.toUpperCase()}`

const directiveOutput = output as keyof DropzoneDirective
const componentOutput = output as keyof DropzoneComponent

this.directiveRef[directiveOutput] = this[componentOutput] as any
}
})
}, 0)
}
@Output('init') readonly DZ_INIT = new EventEmitter<Dropzone>()

@Output('drop') readonly DZ_DROP = new EventEmitter<DragEvent>()
@Output('dragStart') readonly DZ_DRAGSTART = new EventEmitter<DragEvent>()
@Output('dragEnd') readonly DZ_DRAGEND = new EventEmitter<DragEvent>()
@Output('dragEnter') readonly DZ_DRAGENTER = new EventEmitter<DragEvent>()
@Output('dragOver') readonly DZ_DRAGOVER = new EventEmitter<DragEvent>()
@Output('dragLeave') readonly DZ_DRAGLEAVE = new EventEmitter<DragEvent>()
@Output('paste') readonly DZ_PASTE = new EventEmitter<DragEvent>()

@Output('reset') readonly DZ_RESET = new EventEmitter<void>()

@Output('addedFile') readonly DZ_ADDEDFILE = new EventEmitter<Dropzone.DropzoneFile>()
@Output('addedFiles') readonly DZ_ADDEDFILES = new EventEmitter<Dropzone.DropzoneFile>()
@Output('removedFile') readonly DZ_REMOVEDFILE = new EventEmitter<Dropzone.DropzoneFile>()
@Output('thumbnail') readonly DZ_THUMBNAIL = new EventEmitter<[Dropzone.DropzoneFile, string]>()

@Output('error') readonly DZ_ERROR = new EventEmitter<[Dropzone.DropzoneFile, string | Error]>()
@Output('errorMultiple') readonly DZ_ERRORMULTIPLE = new EventEmitter<[Dropzone.DropzoneFile[], string | Error]>()

@Output('processing') readonly DZ_PROCESSING = new EventEmitter<Dropzone.DropzoneFile>()
@Output('processingMultiple') readonly DZ_PROCESSINGMULTIPLE = new EventEmitter<Dropzone.DropzoneFile[]>()

@Output('uploadProgress') readonly DZ_UPLOADPROGRESS = new EventEmitter<[Dropzone.DropzoneFile, number, number]>()
@Output('totalUploadProgress') readonly DZ_TOTALUPLOADPROGRESS = new EventEmitter<[number, number, number]>()

@Output('sending') readonly DZ_SENDING = new EventEmitter<[Dropzone.DropzoneFile, XMLHttpRequest, FormData]>()
@Output('sendingMultiple') readonly DZ_SENDINGMULTIPLE = new EventEmitter<[Dropzone.DropzoneFile[], XMLHttpRequest, FormData]>()

// eslint-disable-next-line @typescript-eslint/ban-types
@Output('success') readonly DZ_SUCCESS = new EventEmitter<[Dropzone.DropzoneFile, Object | string]>()
@Output('successMultiple') readonly DZ_SUCCESSMULTIPLE = new EventEmitter<Dropzone.DropzoneFile[]>()

@Output('canceled') readonly DZ_CANCELED = new EventEmitter<Dropzone.DropzoneFile>()
@Output('canceledMultiple') readonly DZ_CANCELEDMULTIPLE = new EventEmitter<Dropzone.DropzoneFile[]>()

@Output('complete') readonly DZ_COMPLETE = new EventEmitter<Dropzone.DropzoneFile>()
@Output('completeMultiple') readonly DZ_COMPLETEMULTIPLE = new EventEmitter<Dropzone.DropzoneFile[]>()

@Output('maxFilesExceeded') readonly DZ_MAXFILESEXCEEDED = new EventEmitter<Dropzone.DropzoneFile>()
@Output('maxFilesReached') readonly DZ_MAXFILESREACHED = new EventEmitter<Dropzone.DropzoneFile[]>()

@Output('queueComplete') readonly DZ_QUEUECOMPLETE = new EventEmitter<void>()

@ViewChild(DropzoneDirective) directiveRef?: DropzoneDirective

constructor() { }

/** @internal */
ngOnInit(): void { }

public getPlaceholder(): string {
/** @internal */
getPlaceholder(): string {
return 'url(' + encodeURI(this.placeholder) + ')'
}
}
Loading

0 comments on commit e212b10

Please sign in to comment.