core: improve props

safrazik · Aug 31, 2020 · 57ad88a · 57ad88a
1 parent c3852b7
commit 57ad88a
Show file tree

Hide file tree

Showing 11 changed files with 157 additions and 27 deletions.
diff --git a/packages/core/src/components/file-agent.ts b/packages/core/src/components/file-agent.ts
@@ -365,9 +365,6 @@ export class FileAgent extends Component {
         this.$props.fileRecords[0] = fileRecords[0];
       }
 
-      if (this.$props.onInput) {
-        this.$props.onInput(this.$props.fileRecords);
-      }
       if (this.$props.onSelect) {
         this.$props.onSelect(fileRecords);
       }
@@ -432,9 +429,6 @@ export class FileAgent extends Component {
     // if (this.$props.onDelete) {
     //   this.$props.onDelete(fileRecord);
     // }
-    if (this.$props.onInput) {
-      this.$props.onInput(this.$props.fileRecords);
-    }
     this.onEventCheck(
       fileRecord,
       (fr) => {
@@ -555,8 +549,8 @@ export class FileAgent extends Component {
 
   filesChanged(event: InputEvent) {
     const files: FileList = (event.target as HTMLInputElement).files as FileList;
-    if (this.$props.onChange) {
-      this.$props.onChange(event);
+    if (this.$props.onInputChange) {
+      this.$props.onInputChange(event);
     }
     if (!files[0]) {
       return;
@@ -693,6 +687,7 @@ export class FileAgent extends Component {
 
   updateWrapper() {
     this.$el.className = `layout-${this.$props.layout}
+      theme-${this.$props.theme}
       is-sortable-${this.isSortable ? 'enabled' : 'disabled'}
       ${this.$props.sortable === 'hold' ? 'is-sortable-hold' : ''}
       ${this.$props.sortable === 'handle' ? 'is-sortable-handle' : ''}
@@ -788,7 +783,6 @@ export class FileAgent extends Component {
     this.insertSlotBefore('container', 'beforeInner');
     this.insertSlotAfter('container', 'afterInner');
     this.insertSlotAfter(this.$el, 'afterOuter');
-    let index = 0;
     const fileRecords = this.$props.fileRecords.concat([]).reverse();
     const newChildren: HTMLElement[] = [];
     const otherChildren: HTMLElement[] = [];
@@ -802,7 +796,9 @@ export class FileAgent extends Component {
         childRects.push({ element: child, rect: child.getBoundingClientRect() });
       }
     }
+    let index = -1;
     for (const fileRecord of fileRecords) {
+      index++;
       const cachedItem = this.getCachedItemForFileRecord(fileRecord);
       let child = cachedItem?.child;
       let filePreview = cachedItem?.filePreview;
@@ -892,7 +888,6 @@ export class FileAgent extends Component {
       } else {
         container.appendChild(child);
       }
-      index++;
     }
     // newFileElementFirst;
     const removedItems = this.cachedItems.filter((ch) => fileRecords.indexOf(ch.fileRecord) === -1);
@@ -943,6 +938,9 @@ export class FileAgent extends Component {
     input.onchange = (event) => {
       this.filesChanged(event as InputEvent);
     };
+    if (this.$props.onChange) {
+      this.$props.onChange(this.$props.fileRecords);
+    }
   }
 
   get $el(): HTMLElement {

diff --git a/packages/core/src/components/file-preview.ts b/packages/core/src/components/file-preview.ts
@@ -93,7 +93,13 @@ export class FilePreview extends Component {
 
   hasDismissibleError() {
     const fileRecord = this.$props.fileRecord as FileRecord;
-    return !(fileRecord.error && (fileRecord.error.size || fileRecord.error.type));
+    if (!fileRecord.error) {
+      return false;
+    }
+    if (fileRecord.error.dismissible === false) {
+      return false;
+    }
+    return !(fileRecord.error.size || fileRecord.error.type);
   }
 
   dismissError() {

diff --git a/packages/core/src/demo/props-form.html b/packages/core/src/demo/props-form.html
@@ -17,4 +17,14 @@
     </span>
     <input type="text" data-ref="prop-accept" value="image/*,video/*,.pdf,.doc,.docx,.ods" />
   </div> -->
+  <div>
+    <hr />
+    <div>With Selected: <span data-ref="scoped-file"></span></div>
+    <div data-ref="scoped-container"></div>
+    <div data-ref="scoped-operations">
+      <div>Set progress to: <input data-ref="scoped-progress" type="range" min="0" max="100" /></div>
+      <div>Set error: <input data-ref="scoped-error" type="text" /></div>
+      <div>Set name: <input data-ref="scoped-name" type="text" /></div>
+    </div>
+  </div>
 </div>
diff --git a/packages/core/src/demo/props-form.ts b/packages/core/src/demo/props-form.ts
@@ -3,9 +3,12 @@ import template from './props-form.html';
 // import FileRecord from '../lib/file-record';
 // import utils from '../lib/utils';
 import { FileAgent, FileAgentProps, createFileAgentProps } from '..';
+import FileRecord from '../lib/file-record';
 
 export class PropsForm extends Component {
   props = createFileAgentProps();
+  fileRecords: FileRecord[] = [];
+  scopedFileRecord?: FileRecord;
   constructor(protected fileAgent: FileAgent) {
     super();
     this.fileAgent.setProps({
@@ -14,8 +17,15 @@ export class PropsForm extends Component {
       // sortable: 'handle',
       sortable: true,
       draggable: true,
-      layout: 'list',
+      // layout: 'list',
+      layout: 'default',
+      theme: 'rounded',
+      onChange: (fileRecords) => {
+        this.fileRecords = fileRecords;
+        this.updateScopedUi();
+      },
     });
+    this.fileRecords = this.fileAgent.props.fileRecords;
     // this.fileAgent.$props.theme = 'list';
     // this.fileAgent.$props.uploadUrl =
     //   'http://localhost/safrazik/vue-file-agent/packages/vue-file-agent/upload-server-examples/php/upload-server.php';
@@ -86,7 +96,11 @@ export class PropsForm extends Component {
       };
       strings.appendChild(div);
     }
-    for (const sel of [['layout', ['default', 'list']]]) {
+    for (const sel of [
+      //
+      ['layout', ['default', 'list']],
+      ['theme', ['default', 'rounded']],
+    ]) {
       const prop = sel[0] as string;
       const options = sel[1] as string[];
       const div = document.createElement('div');
@@ -123,6 +137,60 @@ export class PropsForm extends Component {
     //   this.fileAgent.$props.accept = (event.target as HTMLInputElement).value;
     //   this.update();
     // };
+    (this.getRef('scoped-progress') as HTMLInputElement).oninput = (event) => {
+      const value = (event.target as HTMLInputElement).value;
+      if (!this.scopedFileRecord) {
+        return;
+      }
+      this.scopedFileRecord.setProgress(parseFloat(value));
+    };
+    (this.getRef('scoped-error') as HTMLInputElement).oninput = (event) => {
+      const value = (event.target as HTMLInputElement).value;
+      if (!this.scopedFileRecord) {
+        return;
+      }
+      this.scopedFileRecord.setError(value || false, false);
+    };
+    (this.getRef('scoped-name') as HTMLInputElement).oninput = (event) => {
+      const value = (event.target as HTMLInputElement).value;
+      if (!this.scopedFileRecord) {
+        return;
+      }
+      this.scopedFileRecord.setName(value, false);
+    };
+    this.updateScopedUi();
+  }
+
+  updateScopedFilenameUi() {
+    if (!this.scopedFileRecord) {
+      return;
+    }
+    this.getRef('scoped-file').innerHTML = this.scopedFileRecord.name();
+  }
+
+  updateScopedUi() {
+    if (!this.scopedFileRecord) {
+      this.scopedFileRecord = this.fileRecords[0];
+      this.updateScopedFilenameUi();
+    }
+    const container = this.getRef('scoped-container');
+    container.innerHTML = '';
+    let idx = -1;
+    for (const fileRecord of this.fileRecords) {
+      idx++;
+      const div = document.createElement('div');
+      const button = document.createElement('button');
+      button.type = 'button';
+      button.innerHTML = '' + (idx + 1) + '. ' + fileRecord.name();
+      button.onclick = () => {
+        // alert(idx);
+        this.scopedFileRecord = fileRecord;
+        this.updateScopedFilenameUi();
+      };
+      // div.appendChild(button);
+      container.appendChild(button);
+    }
+    // this.getRef('scoped-operations');
   }
 
   get $el() {

diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
@@ -7,5 +7,6 @@ export * from './lib/uploader-interface';
 import plugins from './lib/plugins';
 
 import './scss/index.scss';
+import './scss/themes/rounded/index.scss';
 
 export { FileRecord, plugins };
diff --git a/packages/core/src/lib/file-record.ts b/packages/core/src/lib/file-record.ts
@@ -27,6 +27,7 @@ interface ErrorFlags {
   type?: boolean;
   size?: boolean;
   upload?: false | string;
+  dismissible?: boolean;
 }
 
 export interface RawFileRecord {
@@ -336,6 +337,14 @@ class FileRecord {
     return name;
   }
 
+  public getName(withExtension = false) {
+    return this.name(!withExtension);
+  }
+
+  public setName(name: string, withExtension = false) {
+    this.nameWithoutExtension(name);
+  }
+
   public isDarkColor(): boolean {
     if (this.imageColor) {
       const rgb = this.imageColor;
@@ -461,12 +470,13 @@ class FileRecord {
     this.setError(error);
   }
 
-  public setError(error?: string | false) {
+  public setError(error?: string | false, dismissible = true) {
     if (error === false) {
       this.error = false;
     } else {
       this.error = {
         upload: error,
+        dismissible,
       };
     }
     this.onChange.error(this.error);

diff --git a/packages/core/src/lib/props.ts b/packages/core/src/lib/props.ts
@@ -78,6 +78,7 @@ export interface FileAgentProps {
   multiple?: boolean;
   smartBackground?: boolean;
   layout?: 'default' | 'list';
+  theme?: 'default' | 'rounded';
   sortable?: boolean | 'hold' | 'handle';
   meta?: boolean;
   compact?: boolean;
@@ -99,11 +100,11 @@ export interface FileAgentProps {
   // events?: {
   onBeforeDelete?: (fileRecord: FileRecord) => CancelableEventReturnType;
   onDelete?: (fileRecord: FileRecord) => CancelableEventReturnType;
-  onChange?: (event: InputEvent) => void;
+  onInputChange?: (event: InputEvent) => void;
   onDrop?: (event: DragEvent) => void;
   onBeforeRename?: (fileRecord: FileRecord) => CancelableEventReturnType;
   onRename?: (fileRecord: FileRecord) => CancelableEventReturnType;
-  onInput?: (fileRecords: FileRecord[]) => void;
+  onChange?: (fileRecords: FileRecord[]) => void;
   onSelect?: (fileRecords: FileRecord[]) => void;
   onUpload?: (fileRecord: FileRecord[], result: any) => void;
   onUploadError?: (fileRecord: FileRecord[], result: any) => void;
@@ -172,6 +173,7 @@ export const createFileAgentProps = (
         multiple: true,
         smartBackground: true,
         layout: 'default',
+        theme: 'default',
         sortable: false,
         meta: true,
         compact: false,
@@ -192,11 +194,11 @@ export const createFileAgentProps = (
         uploadWithCredentials: undefined,
         onBeforeDelete: undefined,
         onDelete: undefined,
-        onChange: undefined,
+        onInputChange: undefined,
         onDrop: undefined,
         onBeforeRename: undefined,
         onRename: undefined,
-        onInput: undefined,
+        onChange: undefined,
         onSelect: undefined,
         onUpload: undefined,
         onUploadError: undefined,
@@ -251,6 +253,7 @@ export const fileAgentProps = {
   multiple: booleanProp(fileAgentPropsDefaults.multiple),
   smartBackground: booleanProp(fileAgentPropsDefaults.smartBackground),
   layout: createProp<'default' | 'list'>('string', String),
+  theme: createProp<'default' | 'rounded'>('string', String),
   sortable: createProp<boolean | 'hold' | 'handle'>('string', String),
   meta: booleanProp(fileAgentPropsDefaults.meta),
   compact: booleanProp(fileAgentPropsDefaults.compact),
@@ -272,11 +275,11 @@ export const fileAgentProps = {
   // events:
   onBeforeDelete: functionProp<(fileRecord: FileRecord) => CancelableEventReturnType>(),
   onDelete: functionProp<(fileRecord: FileRecord) => CancelableEventReturnType>(),
-  onChange: functionProp<(event: InputEvent) => void>(),
+  onInputChange: functionProp<(event: InputEvent) => void>(),
   onDrop: functionProp<(event: DragEvent) => void>(),
   onBeforeRename: functionProp<(fileRecord: FileRecord) => CancelableEventReturnType>(),
   onRename: functionProp<(fileRecord: FileRecord) => CancelableEventReturnType>(),
-  onInput: functionProp<(fileRecords: FileRecord[]) => void>(),
+  onChange: functionProp<(fileRecords: FileRecord[]) => void>(),
   onSelect: functionProp<(fileRecords: FileRecord[]) => void>(),
   onUpload: functionProp<(fileRecord: FileRecord[], result: any) => void>(),
   onUploadError: functionProp<(fileRecord: FileRecord[], result: any) => void>(),

diff --git a/packages/core/src/lib/sortable/sortable-manager.ts b/packages/core/src/lib/sortable/sortable-manager.ts
@@ -269,22 +269,24 @@ export class SortableManager {
     movingInfo = undefined;
   }
 
-  getRectForElement(element: HTMLElement) {
+  getRectForElement(element: HTMLElement): Rect {
     const elementRect = this.elementRects.filter((cr) => cr.element === element)[0];
     const rect = elementRect ? elementRect.rect : element.getBoundingClientRect();
     return rect;
   }
 
-  getElementCloned(element: HTMLElement) {
+  getElementCloned(element: HTMLElement, rect: Rect) {
     const clonedElement = element.cloneNode(true) as HTMLElement;
     clonedElement.style.position = 'fixed';
     clonedElement.style.top = '0';
     clonedElement.style.left = '0';
     clonedElement.style.zIndex = '12';
     clonedElement.style.boxSizing = 'border-box';
     clonedElement.style.pointerEvents = 'none';
-    clonedElement.style.width = element.clientWidth + 'px';
-    clonedElement.style.height = element.clientHeight + 'px';
+    clonedElement.style.width = rect.width + 'px';
+    clonedElement.style.height = rect.height + 'px';
+    // clonedElement.style.width = element.clientWidth + 'px';
+    // clonedElement.style.height = element.clientHeight + 'px';
     return clonedElement;
   }
 
@@ -515,11 +517,11 @@ export class SortableManager {
     this.container.classList.add(this.activeContainerClass);
     const element = this.movingInfo.element;
     this.calculateElementRects();
+    const rect = this.getRectForElement(element);
     element.style.transition = '';
-    const clonedElement = this.getElementCloned(element);
+    const clonedElement = this.getElementCloned(element, rect);
     // clonedElement.style.opacity = '0.5'
     clonedElement.classList.add(this.activeElementClass);
-    const rect = this.getRectForElement(element);
     element.style.visibility = 'hidden';
     this.container.appendChild(clonedElement);
     //   element.style.opacity = '0';

diff --git a/packages/core/src/scss/_file-progress.scss b/packages/core/src/scss/_file-progress.scss
@@ -39,6 +39,7 @@
       width: 5px !important;
       height: 5px !important;
       right: 0 !important;
+      top: 0 !important;
       left: auto !important;
       border-radius: 50%;
       box-shadow: -1px 1px 2px 0px rgba(0, 0, 0, 0.75);

diff --git a/packages/core/src/scss/themes/rounded/index.scss b/packages/core/src/scss/themes/rounded/index.scss
@@ -0,0 +1,28 @@
+.theme-rounded {
+  .file-agent {
+    .file-preview-wrapper {
+      border-radius: 15px;
+      overflow: hidden;
+      border-width: 5px !important;
+    }
+    .file-progress {
+      &.file-progress-done {
+        top: 1px !important;
+        right: 1px !important;
+      }
+    }
+  }
+
+  .grid-block-wrapper {
+    padding: 5px !important;
+  }
+
+  &.layout-list,
+  .layout-list {
+    .file-preview-wrapper {
+      border-radius: 12px;
+      overflow: hidden;
+      border-width: 3px !important;
+    }
+  }
+}