diginet-core-ui 1.4.39 → 1.4.40

package/src/utils/getFileType.js

@@ -0,0 +1,24 @@
+const getFileType = (FileExt, defaultValue='another', onlyExt=true) => {
+    if (!FileExt) return FileExt;
+    if (onlyExt && FileExt.includes('.')) {
+        FileExt = FileExt.slice(FileExt.lastIndexOf('.') + 1);
+    }
+    switch (true) {
+        case (/jpg|png|jpeg|gif|bmp|tiff|svg|image/i.test(FileExt)):
+            return 'image';
+        case (/doc|word/i.test(FileExt)):
+            return 'word';
+        case (/xls|sheet/i.test(FileExt)):
+            return 'sheet';
+        case (/ppt|presentation/i.test(FileExt)):
+            return 'presentation';
+        case (/zip|rar|compressed/i.test(FileExt)):
+            return 'compressed';
+        case (/pdf/i.test(FileExt)):
+            return 'pdf';
+        default:
+            return defaultValue;
+    }
+}
+
+export default getFileType;

package/src/utils/handleBreakpoints.js

@@ -0,0 +1,27 @@
+import { useTheme } from 'theme';
+import { breakpointKeys } from '../theme/createBreakpoints';
+const { breakpoints: themeBreakpoints } = useTheme();
+
+const handleBreakpoints = (propValue, cssFromPropValue) => {
+    let output = '';
+    if (Array.isArray(propValue)) {
+        propValue.map((_, index) => {
+            output = output
+                .concat([themeBreakpoints.up(breakpointKeys[index])])
+                .concat(`{${cssFromPropValue(propValue[index])}} `);
+        });
+        return output;
+    }
+    if (typeof propValue === 'object') {
+        Object.keys(propValue).map(item => {
+            if (breakpointKeys.includes(item)) {
+                output = output.concat([themeBreakpoints.up(item)]).concat(`{${cssFromPropValue(propValue[item])}} `);
+            }
+        });
+        return output;
+    }
+    output = cssFromPropValue(propValue);
+    return output;
+};
+
+export default handleBreakpoints;

package/src/utils/hexToRGBA/index.js

@@ -0,0 +1,25 @@
+import { isColor, isColorName } from 'styles/color-helper';
+// import { getColor } from 'styles/utils';
+
+/**
+ * Convert from #ffffff to rgba()
+ * @param hex color - #ffffff
+ * @param {number} alpha - 0.5
+ * @returns {string} color - rgba()
+ */
+export const hexToRGBA = (hex, alpha) => {
+    // hex = getColor(hex);
+    if (isColorName(hex)) hex = isColorName(hex);
+    if (!isColor(hex)) return;
+    var r = parseInt(hex.slice(1, 3), 16),
+        g = parseInt(hex.slice(3, 5), 16),
+        b = parseInt(hex.slice(5, 7), 16);
+
+    if (alpha) {
+        return 'rgba(' + r + ', ' + g + ', ' + b + ', ' + alpha + ')';
+    } else {
+        return 'rgb(' + r + ', ' + g + ', ' + b + ')';
+    }
+};
+
+export default hexToRGBA;

package/src/utils/hexToRGBA/index.stories.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import { ImportComp } from 'components/others/import/index.stories';
+import { hexToRGBA } from 'utils';
+
+export default {
+    title: 'Utils/hexToRGBA',
+};
+
+const Template = args => {
+    const { color, opacity } = args;
+
+    return (
+        <>
+            <ImportComp components={'hexToRGBA'} from={'utils'} />
+            <div style={{ width: 50, height: 50, backgroundColor: hexToRGBA(color, opacity) }}></div>
+        </>
+    );
+};
+
+export const HexToRGBA = Template.bind({});
+HexToRGBA.args = {
+    color: 'system/active',
+    opacity: 0.1,
+};
+
+HexToRGBA.parameters = {
+    docs: {
+        source: {
+            code: `import { hexToRGBA } from 'diginet-core-ui/utils'
+
+export default function Component() {
+    const bgColor = hexToRGBA('system/active', 0.1);
+
+    return (
+        <div style={{ width: 50, height: 50, backgroundColor: bgColor }} />
+    )
+}
+`,
+            language: 'javascript',
+            type: 'auto',
+        },
+    },
+};

package/src/utils/index.js

@@ -0,0 +1,40 @@
+import * as utils from '.';
+
+export { default as capitalize } from './string/capitalize';
+export { default as capitalizeSentenceCase } from './string/capitalizeSentenceCase';
+export { default as classNames } from './classNames';
+export { default as date } from './date';
+export { default as getFileType } from './getFileType';
+export { default as handleBreakpoints } from './handleBreakpoints';
+export { default as hexToRGBA } from './hexToRGBA';
+export { default as isMobile } from './isMobile';
+export { default as isUndefined } from './isUndefined';
+export { default as mapParent } from './map-parent';
+export { default as onValidate } from './validate';
+export { default as parseTextToHTML } from './parseHTML';
+export { default as promisify } from './promisify';
+export { default as randomString } from './randomString';
+export { default as refType } from './refType';
+export { default as refMethodType } from './refMethodType';
+export { default as removeUnicode } from './remove-unicode';
+export { default as renderHTML } from './renderHTML';
+export { default as renderIcon } from './renderIcon';
+export { default as SbTemplate } from './sb-template';
+export { default as updatePosition } from './updatePosition';
+export { default as useControlled } from './useControlled';
+export { default as useDelayUnmount } from './useDelayUnmount';
+export { default as useElementSize } from './useElementSize';
+export { default as useInput } from './useInput';
+export { default as useIntersection } from './intersectionObserver';
+export { default as useMediaQuery } from './useMediaQuery';
+export { default as useOnClickOutside } from './useOnClickOutside';
+export { default as usePortal } from './usePortal';
+export * from './array/array';
+export * from './date';
+export * from './render-portal';
+export * from './sb-template';
+export * from './string/string';
+export * from './validate';
+export * from './object/object';
+
+export default utils;

package/src/utils/intersectionObserver.js

@@ -0,0 +1,45 @@
+import { useEffect } from 'react';
+
+let listenerCallbacks = new WeakMap();
+
+let observer;
+
+const handleIntersections = entries => {
+    entries.forEach(entry => {
+        if (listenerCallbacks.has(entry.target)) {
+            let cb = listenerCallbacks.get(entry.target);
+
+            if (entry.isIntersecting || entry.intersectionRatio > 0) {
+                observer.unobserve(entry.target);
+                listenerCallbacks.delete(entry.target);
+                cb();
+            }
+        }
+    });
+};
+
+const getIntersectionObserver = () => {
+    if (observer === undefined) {
+        observer = new IntersectionObserver(handleIntersections, {
+            rootMargin: '100px',
+            threshold: '0.15',
+        });
+    }
+    return observer;
+};
+
+const useIntersection = (elem, callback) => {
+    useEffect(() => {
+        let target = elem.current;
+        let observer = getIntersectionObserver();
+        listenerCallbacks.set(target, callback);
+        observer.observe(target);
+
+        return () => {
+            listenerCallbacks.delete(target);
+            observer.unobserve(target);
+        };
+    }, []);
+};
+
+export default useIntersection;

package/src/utils/isMobile/index.js

@@ -0,0 +1,22 @@
+const isMobile = {
+    iOS: function () {
+        return navigator.userAgent.match(/iPhone|iPad|iPod/i);
+    },
+    Android: function () {
+        return navigator.userAgent.match(/Android/i);
+    },
+    BlackBerry: function () {
+        return navigator.userAgent.match(/BlackBerry/i);
+    },
+    Opera: function () {
+        return navigator.userAgent.match(/Opera Mini/i);
+    },
+    Windows: function () {
+        return navigator.userAgent.match(/IEMobile/i) || navigator.userAgent.match(/WPDesktop/i);
+    },
+    any: function () {
+        return isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows();
+    },
+};
+
+export default isMobile;

package/src/utils/isMobile/index.stories.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import { ImportComp } from 'components/others/import/index.stories';
+import { Divider, Typography } from 'components';
+import { isMobile } from 'utils';
+
+export default {
+    title: 'Utils / isMobile',
+};
+
+const Template = args => {
+    const { name, description } = args;
+    return (
+        <>
+            <ImportComp components={name} from={'utils'} />
+            <Typography type={'t1'}>{name}</Typography>
+            <br />
+            <Divider />
+            <br />
+            <Typography type={'h3'}>{description}</Typography>
+            <br />
+            <Typography>Example:</Typography>
+            <div>{`Is mobile's browser? ${isMobile.any() || 'false'}`}</div>
+        </>
+    );
+};
+
+export const IsMobile = Template.bind({});
+IsMobile.args = {
+    name: 'isMobile',
+    description: 'Check if mobile browser.',
+};
+IsMobile.parameters = {
+    controls: { include: [], hideNoControlsWarning: true },
+    docs: {
+        source: {
+            code: `import { useMediaQuery } from 'diginet-core-ui/utils'
+
+isMobile.iOS();
+isMobile.Android();
+isMobile.BlackBerry();
+isMobile.Opera();
+isMobile.Windows();
+isMobile.any();
+`,
+            language: 'javascript',
+            type: 'auto',
+        },
+    },
+};

package/src/utils/isUndefined.js

@@ -0,0 +1,3 @@
+const isUndefined = variable => typeof variable === 'undefined';
+
+export default isUndefined;

package/src/utils/iterator.js

@@ -0,0 +1,45 @@
+const map = (values, callback) => {
+	if (Array.isArray(values)) {
+		return values.map(callback);
+	}
+
+	const result = [];
+
+	for (const key in values) {
+		result.push(callback(values[key], key));
+	}
+
+	return result;
+};
+
+const each = (values, callback) => {
+	if (!values) return;
+
+	if ('length' in values) {
+		for (let i = 0; i < values.length; i++) {
+			if (callback.call(values[i], i, values[i]) === false) {
+				break;
+			}
+		}
+	} else {
+		for (const key in values) {
+			if (callback.call(values[key], key, values[key]) === false) {
+				break;
+			}
+		}
+	}
+
+	return values;
+};
+
+const reverseEach = (array, callback) => {
+	if (!array || !('length' in array) || array.length === 0) return;
+
+	for (let i = array.length - 1; i >= 0; i--) {
+		if (callback.call(array[i], i, array[i]) === false) {
+			break;
+		}
+	}
+};
+
+export { map, each, reverseEach };

package/src/utils/map-parent.js

@@ -0,0 +1,49 @@
+const mapParent = (data, id, parentID, sort = false) => {
+    // Sort follow level
+    let sortedData,
+        remainData = JSON.parse(JSON.stringify(data));
+    if (sort) {
+        let temp = [];
+        sortedData = remainData.filter(item => {
+            if (!item[parentID] || item[parentID] === '0' || item[parentID] === item[id]) {
+                return true;
+            }
+            temp.push(item);
+            return false;
+        });
+        let remainLength = 0;
+
+        while (temp.length && temp.length !== remainLength) {
+            remainLength = temp.length;
+            remainData = [...temp];
+            const inserted = [];
+            temp = [];
+            remainData.forEach(item => {
+                if (sortedData.some(remainData => remainData[id] === item[parentID])) {
+                    inserted.push(item);
+                } else {
+                    temp.push(item);
+                }
+            });
+            sortedData.push(...inserted);
+        }
+    } else {
+        sortedData = remainData;
+    }
+
+    // Mapping follow parent
+    for (let i = sortedData.length - 1; i > -1; i--) {
+        const index = sortedData.findIndex(item => item[id] === sortedData[i][parentID]);
+        if (index !== -1 && i !== index) {
+            if (!sortedData[index].childItems) {
+                sortedData[index].childItems = [];
+            }
+            sortedData[index].childItems.unshift(sortedData[i]);
+            sortedData.splice(i, 1);
+        }
+    }
+
+    return sortedData;
+};
+
+export default mapParent;

package/src/utils/object/deepmerge.js

@@ -0,0 +1,129 @@
+var canUseSymbol = typeof Symbol === 'function' && Symbol.for;
+var REACT_ELEMENT_TYPE = canUseSymbol ? Symbol.for('react.element') : 0xeac7;
+
+function isReactElement(value) {
+    return value.$$typeof === REACT_ELEMENT_TYPE;
+}
+
+function isNonNullObject(value) {
+    return !!value && typeof value === 'object';
+}
+
+function isSpecial(value) {
+    var stringValue = Object.prototype.toString.call(value);
+
+    return stringValue === '[object RegExp]' || stringValue === '[object Date]' || isReactElement(value);
+}
+
+function defaultIsMergeableObject(value) {
+    return isNonNullObject(value) && !isSpecial(value);
+}
+
+function emptyTarget(val) {
+    return Array.isArray(val) ? [] : {};
+}
+
+function cloneUnlessOtherwiseSpecified(value, options) {
+    return options.clone !== false && options.isMergeableObject(value)
+        ? deepmerge(emptyTarget(value), value, options)
+        : value;
+}
+
+function defaultArrayMerge(target, source, options) {
+    return target.concat(source).map(function (element) {
+        return cloneUnlessOtherwiseSpecified(element, options);
+    });
+}
+
+function getEnumerableOwnPropertySymbols(target) {
+    return Object.getOwnPropertySymbols
+        ? Object.getOwnPropertySymbols(target).filter(function (symbol) {
+              return Object.propertyIsEnumerable.call(target, symbol);
+          })
+        : [];
+}
+
+function getKeys(target) {
+    return Object.keys(target).concat(getEnumerableOwnPropertySymbols(target));
+}
+
+function propertyIsOnObject(object, property) {
+    try {
+        return property in object;
+    } catch (_) {
+        return false;
+    }
+}
+
+// Protects from prototype poisoning and unexpected merging up the prototype chain.
+function propertyIsUnsafe(target, key) {
+    return (
+        propertyIsOnObject(target, key) && // Properties are safe to merge if they don't exist in the target yet,
+        !(
+            Object.hasOwnProperty.call(target, key) && // unsafe if they exist up the prototype chain,
+            Object.propertyIsEnumerable.call(target, key)
+        )
+    ); // and also unsafe if they're nonenumerable.
+}
+
+function getMergeFunction(key, options) {
+    if (!options.customMerge) {
+        return deepmerge;
+    }
+    var customMerge = options.customMerge(key);
+    return typeof customMerge === 'function' ? customMerge : deepmerge;
+}
+
+function mergeObject(target, source, options) {
+    var destination = {};
+    if (options.isMergeableObject(target)) {
+        getKeys(target).forEach(function (key) {
+            destination[key] = cloneUnlessOtherwiseSpecified(target[key], options);
+        });
+    }
+    getKeys(source).forEach(function (key) {
+        if (propertyIsUnsafe(target, key)) {
+            return;
+        }
+
+        if (propertyIsOnObject(target, key) && options.isMergeableObject(source[key])) {
+            destination[key] = getMergeFunction(key, options)(target[key], source[key], options);
+        } else {
+            destination[key] = cloneUnlessOtherwiseSpecified(source[key], options);
+        }
+    });
+    return destination;
+}
+
+function deepmerge(target, source, options) {
+    options = options || {};
+    options.arrayMerge = options.arrayMerge || defaultArrayMerge;
+    options.isMergeableObject = options.isMergeableObject || defaultIsMergeableObject;
+    // cloneUnlessOtherwiseSpecified is added to `options` so that custom arrayMerge()
+    // implementations can use it. The caller may not replace it.
+    options.cloneUnlessOtherwiseSpecified = cloneUnlessOtherwiseSpecified;
+
+    var sourceIsArray = Array.isArray(source);
+    var targetIsArray = Array.isArray(target);
+    var sourceAndTargetTypesMatch = sourceIsArray === targetIsArray;
+
+    if (!sourceAndTargetTypesMatch) {
+        return cloneUnlessOtherwiseSpecified(source, options);
+    } else if (sourceIsArray) {
+        return options.arrayMerge(target, source, options);
+    } else {
+        return mergeObject(target, source, options);
+    }
+}
+
+deepmerge.all = function deepmergeAll(array, options) {
+    if (!Array.isArray(array)) {
+        throw new Error('first argument should be an array');
+    }
+
+    return array.reduce(function (prev, next) {
+        return deepmerge(prev, next, options);
+    }, {});
+};
+
+export default deepmerge;

package/src/utils/object/extend.js

@@ -0,0 +1,55 @@
+import { isPlainObject } from '../type';
+
+export const extendFromObject = ( target = {}, source, overrideExistingValues ) => {
+	for (const prop in source) {
+		if (Object.prototype.hasOwnProperty.call(source, prop)) {
+			const value = source[prop];
+			if (!(prop in target) || overrideExistingValues) {
+				target[prop] = value;
+			}
+		}
+	}
+	return target;
+};
+
+export const extend = function (target = {}) {
+
+	let i = 1;
+	let deep = false;
+
+	if (typeof target === 'boolean') {
+		deep = target;
+		target = arguments[1] || {};
+		i++;
+	}
+
+	for (; i < arguments.length; i++) {
+		const source = arguments[i];
+		if (source == null) {
+			continue;
+		}
+
+		for (const key in source) {
+			const targetValue = target[key];
+			const sourceValue = source[key];
+			let sourceValueIsArray = false;
+			let clone;
+
+			if ( key === '__proto__' || key === 'constructor' || target === sourceValue ) { continue; }
+
+			if ( deep && sourceValue && (isPlainObject(sourceValue) || (sourceValueIsArray = Array.isArray(sourceValue)))) {
+				if (sourceValueIsArray) {
+					clone = targetValue && Array.isArray(targetValue) ? targetValue : [];
+				} else {
+					clone = targetValue && isPlainObject(targetValue) ? targetValue : {};
+				}
+
+				target[key] = extend(deep, clone, sourceValue);
+			} else if (sourceValue !== undefined) {
+				target[key] = sourceValue;
+			}
+		}
+	}
+
+	return target;
+};

package/src/utils/object/object.js

@@ -0,0 +1,61 @@
+import { isNumeric } from '../type';
+// import { isNumeric, isPlainObject, isObject } from './type';
+// import variableWrapper from './variable_wrapper';
+
+const clone = (() => {
+    function Clone() {}
+
+    return obj => {
+        Clone.prototype = obj;
+        return new Clone();
+    };
+})();
+
+const orderEach = function (map, func) {
+    const keys = [];
+    let key;
+    let i;
+
+    for (key in map) {
+        if (Object.prototype.hasOwnProperty.call(map, key)) {
+            keys.push(key);
+        }
+    }
+
+    keys.sort((x, y) => {
+        const isNumberX = isNumeric(x);
+        const isNumberY = isNumeric(y);
+
+        if (isNumberX && isNumberY) return x - y;
+        if (isNumberX && !isNumberY) return -1;
+        if (!isNumberX && isNumberY) return 1;
+        if (x < y) return -1;
+        if (x > y) return 1;
+        return 0;
+    });
+
+    for (i = 0; i < keys.length; i++) {
+        key = keys[i];
+        func(key, map[key]);
+    }
+};
+
+/**
+ * getProp utility - an alternative to lodash.get
+ * @author @harish2704, @muffypl, @pi0, @imnnquy
+ * @param {Object} object
+ * @param {String|Array} path
+ * @param {*} defaultVal
+ */
+
+const getProp = (object = {}, keys, defaultVal) => {
+    if (!keys) return defaultVal ?? null;
+    keys = Array.isArray(keys) ? keys : keys.split(/[/.]/gi);
+    object = object[keys[0]];
+    if (object && keys.length > 1) {
+        return getProp(object, keys.slice(1));
+    }
+    return object === undefined ? defaultVal ?? '' : object;
+};
+
+export { clone, orderEach, getProp /**, deepExtendArraySafe */ };

package/src/utils/parseHTML.js

@@ -0,0 +1,20 @@
+const parseHTML = (text, output = 'innerHTML') => {
+    if (!text) return null;
+
+    // Check if text contains unescaped angle brackets that are not valid HTML tags
+    const invalidTagsRegex = /<(?!\s*\/?\s*(a|abbr|acronym|address|area|article|aside|audio|b|base|bdi|bdo|blockquote|body|br|button|canvas|caption|cite|code|col|colgroup|data|datalist|dd|del|details|dfn|dialog|div|dl|dt|em|embed|fieldset|figcaption|figure|footer|form|head|header|h1|h2|h3|h4|h5|h6|hr|html|i|iframe|img|input|ins|kbd|label|legend|li|link|main|map|mark|meta|meter|nav|noscript|object|ol|optgroup|option|output|p|param|picture|pre|progress|q|rp|rt|ruby|s|samp|script|section|select|small|source|span|strong|style|sub|summary|sup|svg|table|tbody|td|template|textarea|tfoot|th|thead|time|title|tr|track|u|ul|var|video|wbr)\b)[^>]*>/g;
+    const invalidTags = text.match(invalidTagsRegex);
+
+    // If text contains invalid tags, replace angle brackets with HTML entities for those tags only
+    if (invalidTags) {
+        invalidTags.forEach(tag => {
+            text = text.replace(tag, tag.replace(/</g, '&lt;').replace(/>/g, '&gt;'));
+        });
+    }
+
+    const DOM = new DOMParser().parseFromString(text, 'text/html').querySelector('body');
+    const result = DOM[output];
+    return result && result.trim ? result.trim() : result;
+};
+
+export default parseHTML;

package/src/utils/promisify.js

@@ -0,0 +1,37 @@
+/* eslint-disable no-undef */
+const slice = Array.prototype.slice;
+let Promise;
+
+if (typeof window !== 'undefined') {
+    Promise = window.Promise;
+}
+if (typeof global !== 'undefined') {
+    Promise = global.Promise;
+}
+
+function promisify(func) {
+    if (Promise) {
+        return function () {
+            const args = slice.call(arguments);
+            const ctx = this;
+            if (typeof args.slice(-1) === 'function') {
+                return func.apply(ctx, args);
+            } else {
+                return new Promise(function (resolve, reject) {
+                    args.push(function (err) {
+                        if (err) {
+                            reject(err);
+                        } else {
+                            resolve.apply(this, slice.call(arguments, 1));
+                        }
+                    });
+                    func.apply(ctx, args);
+                });
+            }
+        };
+    } else {
+        return func;
+    }
+}
+
+export default promisify;