updated

Author: wangbeishan

.npmignore

@@ -0,0 +1,10 @@
+# Node generated files
+node_modules
+npm-debug.log
+.idea
+
+# Ignored files
+# *.ts
+# *.js
+# *.map
+# *.d.ts

README.md

@@ -40,6 +40,7 @@ import {
     RadioWithTextComponent,
     RadioGroupComponent,
     UploadImageComponent,
+    UploadFileComponent,
     CheckboxGroupComponent,
     CheckboxWithTextComponent,
     DateTimePickerComponent,
@@ -55,6 +56,7 @@ import {
     RadioWithTextComponent,
     RadioGroupComponent,
     UploadImageComponent,
+    UploadFileComponent,
     CheckboxGroupComponent,
     CheckboxWithTextComponent,
     DateTimePickerComponent,
@@ -93,6 +95,8 @@ export class YourModule {
     - 3 or 'year' for the 12-month overview （year view）
     - 4 or 'decade' for the 10-year overview. Useful for date-of-birth datetimepickers.
 - `minView`: `string`
+- `useTimestamp`: `boolean`
+  - if `[(ngModel)]` use timestamp, default `false`
 - `disabled`: `boolean`
   - isDisabled: default false
 - `onSelect`
@@ -184,6 +188,73 @@ export class YourModule {
 - `disabled`: `boolean`
   - isDisabled: default false
 
+6. select-with-input
+
+**Template**
+
+``` html
+<select-with-input [(ngModel)]='your_prop' [options]='your_options' [disabled]='your_condition' (onSelect)="onSelect($event)"></select-with-input>
+```
+
+**Options**
+
+- `options`: `option[]`
+  - select options for select2
+  - `option`: `{id: value, text: key}`
+- `ngModel`: option value that is selected or input value(`string`)
+- `onSelect`
+  - callback when option selected
+  - parmas: option value that is selected or input value(`string`)
+
+7. upload-image
+
+**Template**
+
+``` html
+<upload-image [(ngModel)]='images_list_array' [limit]='limit_condition' [multiple]='if_multiple' [disabled]='your_condition' [btnName]='btn_name'></upload-image>
+```
+
+**Options**
+
+- `ngModel`: images array(`image base64 string[]`)
+- `limit`: limit conditions
+  - `{width, height, size, type}`
+  - `width`: image max width(px)
+  - `height`: image max height(px)
+  - `size`: image max size(k)
+  - `type`: image type, accept 'jpeg'/'jpg'/'png'/'gif'
+- `multiple`: `boolean`
+  - if upload multiple images, default true
+- `disabled`: `boolean`
+  - isDisabled: default false
+- `btnName`: string
+  - button display name
+
+8. upload-file
+
+**Template**
+
+``` html
+<upload-file [(ngModel)]='your_prop' [multiple]='if_multiple' [limit]='limit_condition' [disabled]='your_condition' [btnName]="btn_name" ></upload-file>
+```
+
+**Options**
+
+- `ngModel`: files array(`file base64 string[]`)
+- `limit`: limit conditions
+  - `{size, type}`
+  - `size`: file max size(k)
+  - `type`: file type, such as 'txt'
+- `multiple`: `boolean`
+  - if upload multiple files, default true
+- `disabled`: `boolean`
+  - isDisabled: default false
+- `btnName`: string
+  - button display name
+- `dataType`: string
+  - file reader data type
+  - accept 'DataURL'/'ArrayBuffer'/'BinaryString'/'Text', default 'DataURL'
+
 ### Use Directive
 
 1. ngFocusLost

index.ts

@@ -6,4 +6,5 @@ export * from './src/radio-with-input.component';
 export * from './src/select2.component';
 export * from './src/select-with-input/select-with-input.component';
 export * from './src/upload-image/upload-image.component';
+export * from './src/upload-file/upload-file.component';
 export * from './src/on-focus-lost.directive';

package.json

@@ -1,6 +1,6 @@
 {
   "name": "angular-form-components",
-  "version": "0.0.7",
+  "version": "0.1.0",
   "description": "normal form component(select/select2/datetimepicker/checkbox-group/radio-group/...) in angular4(>=2.0-release)",
   "main": "index.ts",
   "scripts": {

src/date-time-picker.component.ts

@@ -12,11 +12,38 @@ require('./assets/datetimepicker/bootstrap-datetimepicker.js');
 import {Component, Input, AfterViewInit, ElementRef, EventEmitter, Output, ViewEncapsulation} from '@angular/core';
 import {CustomInputComponent, customInputAccessor} from './custom-input';
 
+(function () {
+  // Format Date into string.
+  // month(M)、day(d)、hour(h)、minute(m)、second(s)、quarterly(q) , 1 or 2 character，
+  // Samples：
+  // (new Date()).Format("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423
+  // (new Date()).Format("yyyy-M-d h:m:s.S")      ==> 2006-7-2 8:9:4.18
+  (Date as any).prototype.format = function (fmt) { //author: meizz
+    var o = {
+      "M+": this.getMonth() + 1, // Month
+      "d+": this.getDate(), // Day
+      "h+": this.getHours(), // Hour
+      "m+": this.getMinutes(), // Minute
+      "s+": this.getSeconds(), // Second
+      "q+": Math.floor((this.getMonth() + 3) / 3), // Quarterly
+      "S": this.getMilliseconds() // Millisecond
+    };
+    if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
+    for (var k in o)
+      if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
+    return fmt;
+  };
+})();
+
+declare interface IDate extends Date{
+  format: (fmt: any) => string;
+}
+
 @Component({
   selector: 'date-time-picker',
-  template: `<input type="text" class="form-control" [disabled]="disabled" [(ngModel)]="model" (blur)="onBlur()" />`,
+  template: `<input type="text" class="form-control" [disabled]="disabled" [(ngModel)]="viewValue" (blur)="onBlur()" />`,
   styleUrls: ['./assets/datetimepicker/bootstrap-datetimepicker.css'],
-    encapsulation: ViewEncapsulation.None,
+  encapsulation: ViewEncapsulation.None,
   providers: [customInputAccessor(DateTimePickerComponent)]
 })
 // ControlValueAccessor: A bridge between a control and a native element.
@@ -75,11 +102,14 @@ export class DateTimePickerComponent implements AfterViewInit {
       format, // output format
       minView: parseInt(this.minView, 10) || minView || 0, // min view (default: hour view)
     })
-      .on('hide', ev => {
-        this.viewValue = $(ev.target).val(); // set value. (calling onChange())
-        this.model = this.useTimestamp ? (new Date(this.model).getTime() / 1000) : this.viewValue;
-        this.onSelect.emit({timestamp: this.model, text: this.viewValue}); // change event callback of input
-      });
+        .on('hide', ev => {
+          this.viewValue = $(ev.target).val(); // set value. (calling onChange())
+          // If use timestamp, change string into timestamp.
+          //
+          this.model = this.useTimestamp ? (Date.parse(this.viewValue) / 1000) : this.viewValue;
+          this.onChange(this.model);
+          this.onSelect.emit({timestamp: this.model, text: this.viewValue}); // change event callback of input
+        });
   }
 
   // Set touched on blur
@@ -89,10 +119,10 @@ export class DateTimePickerComponent implements AfterViewInit {
 
   // Write a new value to the element.
   writeValue(value: string): void {
-    if (value !== this.model) {
+    if (value && value !== this.model) {
       this.model = value;
       const vd = new Date((+value) * 1000); // multiply 1000 for server timestamp
-      this.viewValue = vd.format(this.formatStr);
+      this.viewValue = (vd as IDate).format(this.formatStr);
     }
   }
 

src/select-with-input/select-with-input.component.ts

@@ -1,6 +1,6 @@
 /**
  * desc：select-with-input
- * how to use: <select-with-input [(ngModel)]='your_prop' [options]='your_options' [disabled]='your_condition' ></select-with-input>gi
+ * how to use: <select-with-input [(ngModel)]='your_prop' [options]='your_options' [disabled]='your_condition' ></select-with-input>
  */
 
 import { Component, Input, Output, EventEmitter } from '@angular/core';
@@ -21,7 +21,7 @@ interface IOption{
 export class SelectWithInputComponent {
     @Input() options: IOption[] = []; // object: {id, text}
     @Input() disabled: boolean = false;
-    @Output() select = new EventEmitter<any>();
+    @Output() onSelect = new EventEmitter<any>();
 
     isOpen: boolean = false;
 
@@ -34,6 +34,7 @@ export class SelectWithInputComponent {
         this.viewModel = option.text; // set view value
         this.model = option.id;       // set inner value
         this.onChange(this.model);
+        this.onSelect.emit(this.model);
         this.isOpen = false;
     }
 
@@ -43,6 +44,7 @@ export class SelectWithInputComponent {
         const option = this.options && this.options.find(x => x.text === value);
         this.model = option ? option.id : value;
         this.onChange(this.model);
+        this.onSelect.emit(this.model);
     }
 
     isSelected(option: IOption){

src/upload-file/upload-file.component.html

@@ -0,0 +1,18 @@
+<span class="btn btn-info btn-file">
+    <i class="fa fa-upload fa-fw"></i>
+    {{btnName}} 
+    <input type="file" accept="*" [multiple]="multiple" (change)="upLoad()">
+</span>
+
+<p *ngIf="help" class="help-block">{{help}}</p>
+
+<div *ngFor="let f of filesArr">
+    <p>{{f.name}}</p>
+</div>
+
+<div *ngIf="checkErrArr.length" style="color: red;">
+    <div *ngFor="let errArr of checkErrArr">
+        <p><strong>{{errArr.name}}</strong></p>
+        <p *ngFor="let err of errArr.checkErr">{{err}}</p>
+    </div>
+</div>

src/upload-file/upload-file.component.ts

@@ -0,0 +1,118 @@
+/**
+ * desc：upload-file
+ * how to use: <upload-file [(ngModel)]='your_prop' [multiple]='if_multiple' [limit]='limit_condition' [disabled]='your_condition' [btnName]="btn_name" ></upload-file>
+ */
+import {Component, Input, OnInit, ElementRef} from '@angular/core';
+import {customInputAccessor} from '../custom-input';
+
+export interface IFileLimit {
+    size?: number;
+    type?: string;
+}
+
+@Component({
+    selector: 'upload-file',
+    templateUrl: './upload-file.component.html',
+    providers: [customInputAccessor(UploadFileComponent)]
+})
+export class UploadFileComponent implements OnInit {
+    @Input() disabled: boolean = false;
+    @Input() required: boolean = false;
+    @Input() limit: IFileLimit = {};
+    @Input() btnName: string = 'upload files';
+    @Input() multiple: boolean = true;
+    @Input() dataType: string = 'DataURL'; // Can be 'DataURL'/'ArrayBuffer'/'BinaryString'/'Text'
+
+    filesArr: any = [];
+    help: string = '';
+    checkErrArr: any = [];
+
+    private model: string[] = []; // urls array chosen
+    private onChange: (_: any) => void;
+    private onTouched: () => void;
+
+    constructor(private el: ElementRef) {
+    }
+
+    ngOnInit() {
+        // Set help text.
+        if (this.required) {
+            this.help += 'required. ';
+        }
+        if (this.limit) {
+            if (this.limit.size) {
+                this.help = this.help ? this.help + ', <= ' + this.limit.size + 'k' : '<= ' + this.limit.size + 'k';
+            }
+            if (this.limit.type) {
+                this.help = this.help ? this.help + ', type: ' + this.limit.type : 'Type: ' + this.limit.type;
+            }
+        }
+    }
+
+    // when file input change
+    upLoad() {
+        const me = this;
+        this.filesArr = [];
+        this.model = [];
+        this.checkErrArr = [];
+        // Get files.
+        const input = $(this.el.nativeElement).find('input')[0];
+        const files = input.files;
+        if (files) {
+            // Travelsal files.
+            Object.keys(files).forEach(index => {
+                const file = files[index];
+                const regMap = new RegExp(`\.${this.limit.type}$`, 'i');
+                const reader: FileReader = new FileReader();
+
+                reader.onload = (e: ProgressEvent) => {
+                    const url = reader.result;
+                    const name = file.name;
+                    const checkErr = [];
+                    // If image is not valid, write down the file name and error message.
+                    if (this.limit.size && file.size > this.limit.size * 1024) {
+                        checkErr.push('File should no more than ' + this.limit.size + ' K. ');
+                    }
+                    if (this.limit.type && !regMap.test(file.name)) {
+                        checkErr.push('File type should be ' + this.limit.type);
+                    }
+                    if (!checkErr.length) {
+                        // If image is valid, push into model array
+                        this.filesArr.push({name, url});
+                        this.model.push(url);
+                        this.onChange(this.model);
+                    } else {
+                        this.checkErrArr.push({name, checkErr});
+                    }
+                };
+                // reader
+                reader[`readAs${me.dataType}`](file);
+            });
+        }
+    }
+
+    // Set touched on blur
+    onBlur() {
+        this.onTouched();
+    }
+
+    // Write a new value to the element.
+    writeValue(value: string[]): void {
+        if (value && value.length) {
+            this.model = value;
+            this.filesArr = this.model.map(url => {
+                return {url, name: ''};
+            });
+        }
+    }
+
+    // Set the function to be called when the control receives a change event.
+    registerOnChange(fn: (_: any) => {}): void {
+        this.onChange = fn;
+    }
+
+    // registerOnTouched(fn: any) : void
+    registerOnTouched(fn: () => {}): void {
+        this.onTouched = fn;
+    }
+}

src/upload-image/upload-image.component.html

@@ -1,7 +1,7 @@
 <span class="btn btn-info btn-file">
     <i class="fa fa-upload fa-fw"></i>
     {{btnName}} 
-    <input type="file" accept="image/*" multiple="multiple" (change)="upLoad()">
+    <input type="file" accept="image/*" [multiple]="multiple" (change)="upLoad()">
 </span>
 
 <p *ngIf="help" class="help-block">{{help}}</p>

src/upload-image/upload-image.component.ts

@@ -1,6 +1,6 @@
 /**
  * desc：upload-image
- * how to use: <upload-image [(ngModel)]='your_prop' [limit]='limit_condition' [disabled]='your_condition' [btnName]="btn_name" ></upload-image>
+ * how to use: <upload-image [(ngModel)]='your_prop' [multiple]='if_multiple' [limit]='limit_condition' [disabled]='your_condition' [btnName]="btn_name" ></upload-image>
  */
 import {Component, Input, OnInit, ElementRef} from '@angular/core';
 import {customInputAccessor} from '../custom-input';
@@ -22,6 +22,7 @@ export class UploadImageComponent implements OnInit {
     @Input() required: boolean = false;
     @Input() limit: ILimit = {};
     @Input() btnName: string = 'upload images';
+    @Input() multiple: boolean = true;
 
     imagesArr: any = [];
     help: string = '';