@lion/ui 0.2.2 → 0.3.1

package/components/input-date/src/LionInputDate.js

@@ -2,16 +2,6 @@ import { IsDate } from '@lion/ui/form-core.js';
 import { LionInput } from '@lion/ui/input.js';
 import { formatDate, LocalizeMixin, parseDate } from '@lion/ui/localize-no-side-effects.js';
 
-/**
- * @param {Date|number} date
- */
-function isValidDate(date) {
-  // to make sure it is a valid date we use isNaN and not Number.isNaN
-  // @ts-ignore [allow]: dirty hack, you're not supposed to pass Date instances to isNaN
-  // eslint-disable-next-line no-restricted-globals
-  return date instanceof Date && !isNaN(date);
-}
-
 /**
  * `LionInputDate` has a .modelValue of type Date. It parses, formats and validates based
  * on locale.
@@ -51,7 +41,8 @@ export class LionInputDate extends LocalizeMixin(LionInput) {
    */
   // eslint-disable-next-line class-methods-use-this
   serializer(modelValue) {
-    if (!isValidDate(modelValue)) {
+    const isDate = new IsDate();
+    if (isDate.execute(modelValue)) {
       return '';
     }
     // modelValue is localized, so we take the timezone offset in milliseconds and subtract it

package/components/input-datepicker/src/LionInputDatepicker.js

@@ -4,6 +4,7 @@ import { ScopedElementsMixin } from '@open-wc/scoped-elements';
 import { html, css } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { LionInputDate } from '@lion/ui/input-date.js';
+import { IsDate } from '@lion/ui/form-core.js';
 import {
   OverlayMixin,
   withBottomSheetConfig,
@@ -373,10 +374,12 @@ export class LionInputDatepicker extends ScopedElementsMixin(
    * The LionCalendar shouldn't know anything about the modelValue;
    * it can't handle Unparseable dates, but does handle 'undefined'
    * @param {?} modelValue
-   * @returns {Date|undefined} a 'guarded' modelValue
+   * @returns {Date | undefined} a 'guarded' modelValue
    */
   static __getSyncDownValue(modelValue) {
-    return modelValue instanceof Date ? modelValue : undefined;
+    const isDate = new IsDate();
+    const hasError = isDate.execute(modelValue);
+    return hasError ? undefined : modelValue;
   }
 
   /**

package/components/input-datepicker/test/lion-input-datepicker.test.js

@@ -360,6 +360,26 @@ describe('<lion-input-datepicker>', () => {
         expect(el.__calendarMaxDate.toString()).to.equal(new Date('2019/07/15').toString());
       });
 
+      it('should show error on invalid date passed to modelValue', async () => {
+        const myDate = new Date('foo');
+        const el = await fixture(html`
+          <lion-input-datepicker .modelValue="${myDate}"></lion-input-datepicker>
+        `);
+        expect(el.hasFeedbackFor).to.include('error');
+        expect(el.validationStates).to.have.property('error');
+        expect(el.validationStates.error).to.have.property('IsDate');
+      });
+
+      it('should show error on date with invalid format passed to modelValue', async () => {
+        const myDate = new Date('30/01/2022');
+        const el = await fixture(html`
+          <lion-input-datepicker .modelValue="${myDate}"></lion-input-datepicker>
+        `);
+        expect(el.hasFeedbackFor).to.include('error');
+        expect(el.validationStates).to.have.property('error');
+        expect(el.validationStates.error).to.have.property('IsDate');
+      });
+
       /**
        * Not in scope:
        * - min/max attr (like platform has): could be added in future if observers needed

package/components/input-file/src/FileHandle.js

@@ -0,0 +1,98 @@
+import { IsAcceptedFile } from './validators.js';
+
+/**
+ * @typedef {import('../types/input-file.js').SystemFile} SystemFile
+ */
+
+// Do these global constants add value? They are only used in this file
+// Typing filehandle would be enough
+
+/**
+ * 500MB in bytes
+ */
+export const MAX_FILE_SIZE = 524288000;
+
+/**
+ * @typedef {Object} property
+ * @property {string} type
+ * @property {string} size
+ */
+export const FILE_FAILED_PROP = {
+  type: 'FILE_TYPE',
+  size: 'FILE_SIZE',
+};
+
+export const UPLOAD_FILE_STATUS = {
+  fail: 'FAIL',
+  pass: 'SUCCESS',
+};
+
+export class FileHandle {
+  /**
+   * @param {SystemFile} systemFile
+   * @param {{ allowedFileTypes: Array<string>; allowedFileExtensions: Array<string>; maxFileSize: number; }} _acceptCriteria
+   */
+  constructor(systemFile, _acceptCriteria) {
+    /**
+     * @type {Array<string>}
+     */
+    this.failedProp = [];
+    this.systemFile = systemFile;
+    this._acceptCriteria = _acceptCriteria;
+    this.uploadFileStatus();
+    if (this.failedProp.length === 0) {
+      this.createDownloadUrl(systemFile);
+    }
+  }
+
+  // TDOO: same util as in validators.js
+  /**
+   * @param {string} fileName
+   * @return {string}
+   * @protected
+   */
+  // eslint-disable-next-line class-methods-use-this
+  _getFileNameExtension(fileName) {
+    return fileName.slice(fileName.lastIndexOf('.') + 1);
+  }
+
+  // TODO: seems to suggest upload is going on...
+  // checks the file size and type to set failedProp property
+  uploadFileStatus() {
+    if (this._acceptCriteria.allowedFileExtensions.length) {
+      const fileExtension = this._getFileNameExtension(this.systemFile.name);
+      if (
+        !IsAcceptedFile.isExtensionAllowed(
+          fileExtension,
+          this._acceptCriteria.allowedFileExtensions,
+        )
+      ) {
+        this.status = UPLOAD_FILE_STATUS.fail;
+        this.failedProp.push(FILE_FAILED_PROP.type);
+      }
+    } else if (this._acceptCriteria.allowedFileTypes.length) {
+      const fileType = this.systemFile.type;
+      if (!IsAcceptedFile.isFileTypeAllowed(fileType, this._acceptCriteria.allowedFileTypes)) {
+        this.status = UPLOAD_FILE_STATUS.fail;
+        this.failedProp.push(FILE_FAILED_PROP.type);
+      }
+    }
+
+    if (IsAcceptedFile.checkFileSize(this.systemFile.size, this._acceptCriteria.maxFileSize)) {
+      if (this.status !== UPLOAD_FILE_STATUS.fail) {
+        this.status = UPLOAD_FILE_STATUS.pass;
+      }
+    } else {
+      this.status = UPLOAD_FILE_STATUS.fail;
+      this.failedProp.push(FILE_FAILED_PROP.size);
+    }
+  }
+
+  /**
+   * @param {SystemFile} file
+   */
+  createDownloadUrl(file) {
+    // @ts-ignore
+    this.downloadUrl = window.URL.createObjectURL(file);
+  }
+}