diginet-core-ui 1.3.24

package/utils/string/capitalize.js

@@ -0,0 +1,3 @@
+export default function capitalize(string) {
+  return string && string.charAt(0).toUpperCase() + string.slice(1);
+}

package/utils/string/capitalizeSentenceCase.js

@@ -0,0 +1,10 @@
+import capitalize from './capitalize';
+export default function capitalizeSentenceCase(string, separator = ' ') {
+  const sentence = string.toLowerCase().split(`${separator}`);
+
+  for (let i in sentence) {
+    sentence[i] = capitalize(sentence[i]);
+  }
+
+  return sentence.join(`${separator}`);
+}

package/utils/string/string.js

@@ -0,0 +1,81 @@
+import { isFunction, isString } from '../type';
+export const encodeHtml = str => {
+  const encodeRegExp = [new RegExp('&', 'g'), new RegExp('"', 'g'), new RegExp("'", 'g'), new RegExp('<', 'g'), new RegExp('>', 'g')];
+  return String(str).replace(encodeRegExp[0], '&amp;').replace(encodeRegExp[1], '&quot;').replace(encodeRegExp[2], '&#39;').replace(encodeRegExp[3], '&lt;').replace(encodeRegExp[4], '&gt;');
+};
+
+const splitQuad = raw => {
+  switch (typeof raw) {
+    case 'string':
+      return raw.split(/\s+/, 4);
+
+    case 'object':
+      return [raw.x || raw.h || raw.left, raw.y || raw.v || raw.top, raw.x || raw.h || raw.right, raw.y || raw.v || raw.bottom];
+
+    case 'number':
+      return [raw];
+
+    default:
+      return raw;
+  }
+};
+
+export const quadToObject = raw => {
+  const quad = splitQuad(raw);
+  let left = parseInt(quad && quad[0], 10);
+  let top = parseInt(quad && quad[1], 10);
+  let right = parseInt(quad && quad[2], 10);
+  let bottom = parseInt(quad && quad[3], 10);
+
+  if (!isFinite(left)) {
+    left = 0;
+  }
+
+  if (!isFinite(top)) {
+    top = left;
+  }
+
+  if (!isFinite(right)) {
+    right = left;
+  }
+
+  if (!isFinite(bottom)) {
+    bottom = top;
+  }
+
+  return {
+    top: top,
+    right: right,
+    bottom: bottom,
+    left: left
+  };
+};
+export const format = (template, ...values) => {
+  if (isFunction(template)) {
+    return template(...values);
+  }
+
+  values.forEach((value, index) => {
+    if (isString(value)) {
+      value = value.replace(/\$/g, '$$$$');
+    }
+
+    const placeholderReg = new RegExp('\\{' + index + '\\}', 'gm');
+    template = template.replace(placeholderReg, value);
+  });
+  return template;
+};
+export const replaceAll = (() => {
+  const quote = str => (str + '').replace(/([+*?.[^\]$(){}><|=!:])/g, '\\$1'); // lgtm[js/incomplete-sanitization]
+
+
+  return (text, searchToken, replacementToken) => text.replace(new RegExp('(' + quote(searchToken) + ')', 'gi'), replacementToken);
+})();
+export const isEmpty = (() => {
+  const SPACE_REGEXP = /\s/g;
+  return text => !text || !text.replace(SPACE_REGEXP, '');
+})();
+export const isEmail = str => {
+  const re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+  return re.test(String(str).toLowerCase());
+};

package/utils/type.js

@@ -0,0 +1,90 @@
+const types = {
+  '[object Array]': 'array',
+  '[object Date]': 'date',
+  '[object Object]': 'object',
+  '[object String]': 'string',
+  '[object Null]': 'null'
+};
+
+const type = object => {
+  const typeOfObject = Object.prototype.toString.call(object);
+  return typeof object === 'object' ? types[typeOfObject] || 'object' : typeof object;
+};
+
+const isBoolean = object => {
+  return typeof object === 'boolean';
+};
+
+const isExponential = value => {
+  return isNumeric(value) && value.toString().indexOf('e') !== -1;
+};
+
+const isDate = object => {
+  return type(object) === 'date';
+};
+
+const isDefined = object => {
+  return object !== null && object !== undefined;
+};
+
+const isFunction = object => {
+  return typeof object === 'function';
+};
+
+const isString = object => {
+  return typeof object === 'string';
+};
+
+const isNumeric = object => {
+  return typeof object === 'number' && isFinite(object) || !isNaN(object - parseFloat(object));
+};
+
+const isObject = object => {
+  return type(object) === 'object';
+};
+
+const isEmptyObject = object => {
+  let property;
+
+  for (property in object) {
+    return false;
+  }
+
+  return true;
+};
+
+const isPlainObject = object => {
+  if (!object || Object.prototype.toString.call(object) !== '[object Object]') {
+    return false;
+  }
+
+  const proto = Object.getPrototypeOf(object);
+  const ctor = Object.hasOwnProperty.call(proto, 'constructor') && proto.constructor;
+  return typeof ctor === 'function' && Object.toString.call(ctor) === Object.toString.call(Object);
+};
+
+const isPrimitive = value => {
+  return ['object', 'array', 'function'].indexOf(type(value)) === -1;
+};
+
+const isWindow = object => {
+  return object != null && object === object.window;
+};
+
+const isRenderer = object => {
+  return !!(object.jquery || object.dxRenderer);
+};
+
+const isPromise = object => {
+  return object && isFunction(object.then);
+};
+
+const isDeferred = object => {
+  return object && isFunction(object.done) && isFunction(object.fail);
+};
+
+const isEvent = object => {
+  return !!(object && object.preventDefault);
+};
+
+export { isBoolean, isExponential, isDate, isDefined, isFunction, isString, isNumeric, isObject, isEmptyObject, isPlainObject, isPrimitive, isWindow, isRenderer, isPromise, isDeferred, type, isEvent };

package/utils/updatePosition.js

@@ -0,0 +1,36 @@
+const updatePosition = (anchorEl, transformEl, cb) => {
+  const {
+    top,
+    bottom,
+    left,
+    right
+  } = anchorEl.getBoundingClientRect();
+  const {
+    innerHeight,
+    innerWidth
+  } = window;
+  const {
+    height: nodeHeight
+  } = transformEl.getBoundingClientRect(); // Vertical
+
+  if (bottom < 0 || top > innerHeight) {
+    cb();
+  } else if (bottom + 4 + nodeHeight > innerHeight) {
+    if (top - (nodeHeight + 4) > 0) {
+      transformEl.style.top = top - (nodeHeight + 4) + 'px';
+    } else {
+      transformEl.style.top = innerHeight - nodeHeight + 'px';
+    }
+  } else {
+    transformEl.style.top = bottom + 4 + 'px';
+  } // Horizontal
+
+
+  if (left < 0 || right > innerWidth) {
+    cb();
+  } else {
+    transformEl.style.left = left + 'px';
+  }
+};
+
+export default updatePosition;

package/utils/useOnClickOutside.js

@@ -0,0 +1,23 @@
+/**
+ * https://usehooks.com/useOnClickOutside/
+ */
+import { useEffect } from 'react';
+export default function useOnClickOutside(ref, handler) {
+  useEffect(() => {
+    const listener = event => {
+      // Do nothing if clicking ref's element or descendent elements
+      if (!ref.current || ref.current.contains(event.target)) {
+        return;
+      }
+
+      handler(event);
+    };
+
+    document.addEventListener('mousedown', listener);
+    document.addEventListener('touchstart', listener);
+    return () => {
+      document.removeEventListener('mousedown', listener);
+      document.removeEventListener('touchstart', listener);
+    };
+  }, [ref, handler]);
+}

package/utils/usePortal.js

@@ -0,0 +1,56 @@
+import { useEffect, useRef } from 'react';
+/**
+ * Create a element with id
+ * @param {string} id 
+ */
+
+export const createEl = id => {
+  const createdEl = document.createElement('div');
+  createdEl.setAttribute('id', id);
+  return createdEl;
+};
+/**
+ * Insert into document.body at last
+ * @param {Element} rootElem
+ */
+
+export const addRootEl = rootElem => {
+  document.body.insertBefore(rootElem, document.body.lastElementChild.nextElementSibling);
+};
+/**
+ * Create a portal with id
+ * @param {string} id 
+ */
+
+const usePortal = id => {
+  const rootElemRef = useRef(null);
+
+  const getRootEl = () => {
+    if (!rootElemRef.current) {
+      rootElemRef.current = document.createElement('div');
+    }
+
+    return rootElemRef.current;
+  };
+
+  useEffect(() => {
+    const existingParent = document.querySelector(`#${id}`);
+    const parentEl = existingParent || createEl(id);
+
+    if (!existingParent) {
+      addRootEl(parentEl);
+    }
+
+    parentEl.appendChild(rootElemRef.current);
+    return () => {
+      rootElemRef.current.remove();
+
+      if (parentEl.childNodes.length === -1) {
+        parentEl.remove();
+      }
+    };
+  }, []);
+  return getRootEl();
+};
+
+export default usePortal;

package/utils/validate.js

@@ -0,0 +1,149 @@
+import { getGlobal } from '../global';
+import { isEmail as isEmailHandler } from './';
+/**
+ * Validation the string is an valid email
+ * @param {String} str The string to check an email
+ * @param {String} message the error will return if str is not an email
+ * @returns {Boolean} true if value is an email, message or default error if value is not an email
+ */
+
+export const isEmail = (str, _, message) => {
+  if (!nonNullish(str) || str === '') return true;
+  return isEmailHandler(str) || (nonNullish(message) ? message : getGlobal(['validate', 'isEmail']));
+};
+/**
+ * Validation value is not an empty string, array or object
+ * @param {String|Object|Array} value the value to validate not empty
+ * @param {String} message the error will return if value is empty
+ * @returns {Boolean} true if value is not empty, message or default error if value is empty
+ */
+
+export const isNotEmpty = (value, _, message) => {
+  if (!nonNullish(value)) return getGlobal(['validate', 'invalidInput']);
+
+  if (typeof value === 'string') {
+    return value !== '' || message || getGlobal(['validate', 'isNotEmptyString']);
+  } else if (typeof value === 'object') {
+    if (Array.isArray(value)) {
+      return value.length || message || getGlobal(['validate', 'isNotEmptyArray']);
+    } else {
+      return Object.keys(value).length || message || getGlobal(['validate', 'isNotEmptyObject']);
+    }
+  }
+
+  return true;
+};
+/**
+ * Check a number is less than or equal the maximum allowed
+ * @param {Number} value the value to compare with maximum
+ * @param {Number} maximum the maximum value
+ * @param {String} message the error will return if value > maximum
+ * @returns {Boolean|String} true if value is valid, message or default error if invalid (both value and maximum)
+ */
+
+export const max = (value, maximum, message) => {
+  if (!nonNullish([value, maximum]) || value === '') return true;
+  if (isNaN(value) || isNaN(maximum)) return getGlobal(['validate', 'invalidInput']);
+  return value <= maximum || (nonNullish(message) ? message : `${getGlobal(['validate', 'max'])} (${maximum})`);
+};
+/**
+ * check a number is greater than or equal the minimum allowed
+ * @param {Number} value the value to compare with minimize
+ * @param {Number} minimize the minimize value
+ * @param {String} message the error will return if value < minimize
+ * @returns {Boolean|String} true if value is valid, message or default error if invalid (both value and minimize)
+ */
+
+export const min = (value, minimize, message) => {
+  if (!nonNullish([value, minimize]) || value === '') return true;
+  if (isNaN(value) || isNaN(minimize)) return getGlobal(['validate', 'invalidInput']);
+  return value >= minimize || (nonNullish(message) ? message : `${getGlobal(['validate', 'min'])} (${minimize})`);
+};
+/**
+ * check value has anything
+ * @param {String|Number|Object} value the value to check
+ * @param {String} message the error will return if undefined|null|empty
+ * @returns {Boolean|String} true if value is valid, message input or default error if value invalid
+ */
+
+export const required = (value, message) => {
+  return nonNullish(value) && value !== '' || (nonNullish(message) ? message : getGlobal(['validate', 'required']));
+};
+
+const nonNullish = value => {
+  if (Array.isArray(value)) {
+    return value.every(v => v !== undefined && v !== null);
+  }
+
+  return value !== undefined && value !== null;
+};
+
+const validations = {
+  isEmail,
+  isNotEmpty,
+  max,
+  min,
+  required
+};
+/**
+ * validation value follow rule(s)
+ * @param {String|Number|Object|Array} value the value to validate
+ * @param {String|Object|Array} rules the rule(s) to validation value
+ * @param {Boolean} returnOneError only return first error if have errors
+ * @returns {Boolean|String|Array} true if value is valid, error text or an array error if invalid value
+ */
+
+const onValidate = (value, rules, returnOneError) => {
+  if (!rules) return true;
+  let result = true;
+
+  if (typeof rules === 'function') {
+    result = rules(value);
+  } else if (typeof rules === 'object') {
+    if (Array.isArray(rules)) {
+      rules.forEach(rule => {
+        let res;
+
+        if (typeof rule === 'string') {
+          res = validations[rule](value);
+        } else {
+          const name = rule.name || Object.keys(rule)[0];
+          const compareValue = rule.compareValue !== undefined ? rule.compareValue : rule[name];
+
+          if (name && validations[name]) {
+            res = validations[name](value, compareValue, rule.message);
+          }
+        }
+
+        if (res !== true) {
+          if (result === true) {
+            result = [];
+          }
+
+          result.push(res);
+        }
+      });
+    } else {
+      const name = rules.name || Object.keys(rules)[0];
+      const compareValue = rules.compareValue !== undefined ? rules.compareValue : rules[name];
+
+      if (name) {
+        result = validations[name](value, compareValue, rules.message);
+      }
+    }
+  } else if (validations[rules]) {
+    result = validations[rules](value);
+  }
+
+  if (returnOneError) {
+    if (result === true) {
+      return false;
+    } else if (typeof result === 'string') {
+      return result;
+    } else return result[0];
+  }
+
+  return result;
+};
+
+export default onValidate;