@amimpact/willy-utils 4.4.0 → 4.5.0

package/README.md

@@ -1,15 +1,3 @@
 # Utils
 
 Verschillende helpers functies
-
-## Installatie
-```sh
-npm install @amimpact/willy-utils --save
-yarn add @amimpact/willy-utils
-```
-
-## Implementatie
-```javascript
-import { $, $$ } from '@amimpact/willy-utils';
-```
-

package/package.json

@@ -1,39 +1,23 @@
 {
-  "name": "@amimpact/willy-utils",
-  "version": "4.4.0",
-  "description": "Javascript utils",
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
-  "scripts": {
-    "build": "tsc",
-    "publish:prerelease": "npm version prerelease --preid beta && npm publish --tag beta",
-    "publish:prepatch": "npm version prepatch --preid beta && npm publish --tag beta",
-    "publish:patch": "npm version patch && npm publish",
-    "publish:preminor": "npm version preminor --preid beta && npm publish --tag beta",
-    "publish:minor": "npm version minor && npm publish",
-    "postpublish": "git push origin --all; git push origin --tags",
-    "preversion": "npm run build",
-    "watch": "onchange src/* -- npm run build"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+ssh://git@bitbucket.org/amimpact/willy-utils.git"
-  },
-  "keywords": [],
-  "author": "a&m impact",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://bitbucket.org/amimpact/willy-utils/issues"
-  },
-  "homepage": "https://bitbucket.org/amimpact/willy-utils#readme",
-  "devDependencies": {
-    "@types/resize-observer-browser": "^0.1.7",
-    "browserify": "17.0.0",
-    "onchange": "7.1.0",
-    "typescript": "4.7.3"
-  },
-  "dependencies": {
-    "date-fns": "2.28.0",
-    "date-fns-tz": "1.3.4"
-  }
+    "name": "@amimpact/willy-utils",
+    "version": "4.5.0",
+    "description": "Javascript utils",
+    "scripts": {
+        "publish:prerelease": "npm version prerelease --preid beta && npm publish --tag beta",
+        "publish:prepatch": "npm version prepatch --preid beta && npm publish --tag beta",
+        "publish:patch": "npm version patch && npm publish",
+        "publish:preminor": "npm version preminor --preid beta && npm publish --tag beta",
+        "publish:minor": "npm version minor && npm publish",
+        "postpublish": "git push origin --all; git push origin --tags"
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+ssh://git@bitbucket.org/amimpact/willy-utils.git"
+    },
+    "author": "a&m impact",
+    "license": "MIT",
+    "bugs": {
+        "url": "https://bitbucket.org/amimpact/willy-utils/issues"
+    },
+    "homepage": "https://bitbucket.org/amimpact/willy-utils#readme"
 }

package/src/cookie.ts

@@ -0,0 +1,49 @@
+/**
+ * Create Cookie
+ * source: http://www.quirksmode.org/js/cookies.html
+ */
+export const createCookie = (
+    name: string,
+    value: string | boolean,
+    days?: number,
+) => {
+    let expires = '';
+
+    if (days) {
+        const date = new Date();
+        date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
+        expires = `; expires=${date.toUTCString()}`;
+    }
+
+    document.cookie = `${name}=${value}${expires}; path=/`;
+};
+
+/**
+ * Read Cookie
+ * source: http://www.quirksmode.org/js/cookies.html
+ */
+export const readCookie = (name: string) => {
+    const nameEQ = `${name}=`;
+    const ca = document.cookie.split(';');
+
+    for (let i = 0; i < ca.length; i++) {
+        let c = ca[i];
+
+        while (c.charAt(0) === ' ') {
+            c = c.substring(1, c.length);
+        }
+
+        if (c.indexOf(nameEQ) === 0) {
+            return c.substring(nameEQ.length, c.length);
+        }
+    }
+    return null;
+};
+
+/**
+ * Erase Cookie
+ * source: http://www.quirksmode.org/js/cookies.html
+ */
+export const eraseCookie = (name: string) => {
+    createCookie(name, '', -1);
+};

package/src/date.ts

@@ -0,0 +1,304 @@
+import {
+    format,
+    formatDistance,
+    formatDistanceStrict,
+    formatDuration,
+    isBefore,
+    subDays,
+} from 'date-fns';
+import { nl } from 'date-fns/locale';
+import { fromZonedTime } from 'date-fns-tz';
+import { parse as parseISO } from './includes/tinyduration';
+
+/**
+ * Momenteel beschikbare locales
+ * Engels is default (leeg)
+ */
+const availableLocales = {
+    en: '',
+    nl: nl,
+};
+
+/**
+ * Dates uit Craft mooi formatteren
+ *
+ * @param {Object} dateObject
+ * @param {Object} options
+ */
+export interface CraftDate {
+    date: string;
+    timezone: string;
+    timezone_type: number;
+}
+
+export interface FormatCraftDateOptions {
+    /**
+     * Eigen formaat mee kunnen geven
+     *
+     * @type {string}
+     * @memberof FormatCraftDateOptions
+     */
+    format: string;
+
+    /**
+     * i18n Locale mee kunnen geven
+     *
+     * @type {string}
+     * @memberof FormatCraftDateOptions
+     */
+    locale: string;
+
+    /**
+     * Amerikaans formaat maken om in Craft op te kunnen slaan, anders Nederlands
+     *
+     * @type {boolean}
+     * @memberof FormatCraftDateOptions
+     */
+    systemFormat: boolean;
+
+    /**
+     * Datum ook tonen
+     *
+     * @type {boolean}
+     * @memberof FormatCraftDateOptions
+     */
+    showTime: boolean;
+}
+
+/**
+ * Opties voor formatDateFromNow
+ */
+export interface FormatDateFromNowOptions {
+    /**
+     * Toon 'geleden' bij in de datum
+     *
+     * @type {boolean}
+     * @memberof FormatDateFromNowOptions
+     */
+    addSuffix: boolean;
+
+    /**
+     * Secondes ook tonen
+     *
+     * @type {boolean}
+     * @memberof FormatDateFromNowOptions
+     */
+    includeSeconds: boolean;
+
+    /**
+     * Toon datum voor oudere items
+     *
+     * @type {boolean}
+     * @memberof FormatDateFromNowOptions
+     */
+    showDateForOld: boolean;
+
+    /**
+     * Format voor hoe de data getoont wordt
+     *
+     * @type {string}
+     * @memberof FormatDateFromNowOptions
+     */
+    showDateForOldFormat: string;
+
+    /**
+     * Aantal dagen voor bovenstaan item
+     *
+     * @type {number}
+     * @memberof FormatDateFromNowOptions
+     */
+    numberOfDaysShowDateForOld: number;
+
+    /**
+     * Toon datum in strict format, dus niet 'ongeveer' bijv
+     * https://date-fns.org/v2.0.0-alpha.27/docs/formatDistanceStrict
+     *
+     * @type {boolean}
+     * @memberof FormatDateFromNowOptions
+     */
+    strict: boolean;
+
+    /**
+     * Welke locale is default
+     *
+     * @type {any}
+     * @memberof FormatDateFromNowOptions
+     */
+    locale: any;
+}
+
+/**
+ * Opties voor parseISODuration
+ */
+export interface parseISODurationOptions {
+    /**
+     * Geef de duration als humanReadable terug
+     * https://date-fns.org/v2.16.1/docs/formatDuration
+     *
+     * @type {boolean}
+     * @memberof parseISODurationOptions
+     */
+    humanReadable: boolean;
+}
+
+/**
+ * Format date object uit Craft naar iets leesbaars
+ *
+ * @param {CraftDate} dateObject
+ * @param {FormatCraftDateOptions} options
+ */
+export const formatCraftDate = (dateObject: CraftDate, options: FormatCraftDateOptions) => {
+    let dateFormat = options && options.systemFormat ? 'yyyy-MM-dd' : 'dd-MM-yyyy';
+    let localeString = 'nl';
+
+    if (options && options.showTime) {
+        dateFormat += ' HH:mm';
+    }
+
+    // Eigen format mee kunnen geven
+    if (options && options.format) {
+        dateFormat = options.format;
+    }
+
+    // Locale mee kunnen geven
+    if (options && options.locale) {
+        localeString = options.locale;
+    }
+
+    if (!dateObject || !dateObject.date) {
+        return '';
+    }
+
+    /**
+     * De date uit Craft heeft het volgende format: "2019-11-14 08:00:00.000000"
+     * Safari begrijpt dit niet en geeft dan een NaN met new Date(date)
+     * Safari begrijpt het wel als alle - vervangen worden door /, en het laatste gedeelte achter de punt weg is
+     */
+    const dateToFormat = dateObject.date.replace(/-/g, '/').split('.')[0];
+
+    // De spatie tussen datum en tijd vervangen door 'T', anders snapt IE het niet
+    return format(new Date(dateToFormat), dateFormat, {
+        locale: availableLocales[localeString],
+    });
+};
+
+/**
+ * Datum formatteren naar "x minuten etc. geleden"
+ * @param {date, timezone, timezone_type} dateObject
+ */
+export const formatDateFromNow = (dateObject: CraftDate, options: FormatDateFromNowOptions) => {
+    const defaultOptions: FormatDateFromNowOptions = {
+        addSuffix: true,
+        includeSeconds: true,
+        showDateForOld: false,
+        showDateForOldFormat: 'dd-MM-yyyy',
+        numberOfDaysShowDateForOld: 7,
+        strict: false,
+        locale: nl,
+    };
+
+    let opts = defaultOptions;
+    if (options) {
+        opts = (<any>Object).assign({}, defaultOptions, options);
+    }
+
+    if (!dateObject || !dateObject.date) {
+        return '';
+    }
+
+    const parsed = fromZonedTime(dateObject.date, dateObject.timezone);
+
+    /**
+     * Datum tonen voor ouder dan x tijd
+     */
+    if (
+        opts.showDateForOld &&
+        isBefore(parsed, subDays(new Date(), opts.numberOfDaysShowDateForOld))
+    ) {
+        return format(new Date(dateObject.date.replace(' ', 'T')), opts.showDateForOldFormat, {
+            locale: availableLocales[opts.locale],
+        });
+    } else {
+        const formatDistanceOptions = {
+            includeSeconds: opts.includeSeconds,
+            addSuffix: opts.addSuffix,
+            locale: availableLocales[opts.locale],
+        };
+
+        /**
+         * De postdate moet bepaald worden met timezone erbij. Anders krijg je in Engeland bijv de melding 'over ongeveer een uur'
+         * Daarom moet date-fns wel de posttime getransformeerd hebben tot de lokale timezone
+         */
+        if (opts.strict) {
+            return formatDistanceStrict(parsed, new Date(), formatDistanceOptions);
+        } else {
+            return formatDistance(parsed, new Date(), formatDistanceOptions);
+        }
+    }
+};
+
+/**
+ * New date maken op basis van timezone
+ * @param {date, timezone, timezone_type} dateObject
+ */
+export const formatNewDate = (dateObject: CraftDate) => {
+    if (!dateObject || !dateObject.date) {
+        return '';
+    }
+
+    /**
+     * De date uit Craft heeft het volgende format: "2019-11-14 08:00:00.000000"
+     * Safari begrijpt dit niet en geeft dan een NaN met new Date(date)
+     * Safari begrijpt het wel als alle - vervangen worden door /, en het laatste gedeelte achter de punt weg is
+     */
+    // const dateString = dateObject.date.replace(/-/g, '/').split('.')[0];
+
+    const parsed = fromZonedTime(dateObject.date, dateObject.timezone);
+
+    return new Date(parsed);
+};
+
+/**
+ * Convert datum
+ * @param {Date} date
+ */
+export const formatUTCDate = (date: Date) => {
+    const d = new Date(date);
+
+    return new Date(
+        Date.UTC(
+            d.getFullYear(),
+            d.getMonth(),
+            d.getDate(),
+            d.getHours(),
+            d.getMinutes(),
+            d.getSeconds(),
+        ),
+    );
+};
+
+/**
+ * ISO duration naar object ombuigen. Bijv P4W
+ * @param {string} duration
+ * @param {parseISODurationOptions} options
+ */
+export const parseISODuration = (duration: string, options: parseISODurationOptions) => {
+    const defaultOptions: parseISODurationOptions = {
+        humanReadable: false,
+    };
+
+    let opts = defaultOptions;
+    if (options) {
+        opts = (<any>Object).assign({}, defaultOptions, options);
+    }
+
+    const durationObject = parseISO(duration);
+
+    if (opts.humanReadable) {
+        return formatDuration(durationObject, {
+            locale: nl,
+        });
+    }
+
+    return durationObject;
+};

package/src/form.ts

@@ -0,0 +1,78 @@
+/**
+ * Creeert een FormData object vanuit een object
+ * https://gist.github.com/ghinda/8442a57f22099bdb2e34#gistcomment-2719686
+ *
+ * @param {Object} data
+ * @param {FormData} form
+ * @param {String} namespace
+ */
+export const convertObjectToFormData = (
+    data: object | null = {},
+    form: FormData | null = null,
+    namespace: string = '',
+) => {
+    const model = { ...data };
+    const formData = form || new FormData();
+
+    for (const propertyName in model) {
+        if (
+            !Object.prototype.hasOwnProperty.call(model, propertyName) ||
+            ((model[propertyName] === null || model[propertyName] === undefined) &&
+                typeof model[propertyName] !== 'string')
+        ) {
+            continue;
+        }
+
+        const formKey = namespace ? `${namespace}[${propertyName}]` : propertyName;
+
+        // Date
+        if (model[propertyName] instanceof Date) {
+            formData.append(formKey, model[propertyName].toISOString());
+        }
+        // File
+        else if (model[propertyName] instanceof File) {
+            formData.append(formKey, model[propertyName]);
+
+            // Array
+        } else if (model[propertyName] instanceof Array) {
+            if (model[propertyName].length === 0) {
+                formData.append(formKey, '');
+            } else {
+                model[propertyName].forEach((element: unknown, index: number) => {
+                    const tempFormKey = `${formKey}[${index}]`;
+
+                    if (element instanceof File) {
+                        formData.append(tempFormKey, element);
+                    } else {
+                        if (typeof element === 'object') {
+                            convertObjectToFormData(element, formData, tempFormKey);
+                        } else {
+                            formData.append(tempFormKey, element?.toString() || '');
+                        }
+                    }
+                });
+            }
+
+            // Object en geen File
+        } else if (
+            typeof model[propertyName] === 'object' &&
+            !(model[propertyName] instanceof File)
+        ) {
+            convertObjectToFormData(model[propertyName], formData, formKey);
+        } else {
+            const val = model[propertyName];
+            const formDataValue = typeof val === 'boolean' ? (val ? '1' : '0') : val;
+
+            formData.append(formKey, formDataValue.toString());
+        }
+    }
+
+    // for (let propertyName in files) {
+    //     if (files.hasOwnProperty(propertyName)) {
+    //         // formData.append(propertyName, files[propertyName]);
+    //         formData.append(`fields[${propertyName}]`, files[propertyName]);
+    //     }
+    // }
+
+    return formData;
+};